Hi all, I am an Aerospace Engineer working on consumer products through mechatronics in my spare-time and am new to this forum.
I am trying to auto-generate HTML column/row cards through the use of DOM elements. Can anybody help me out to convert the following HTML to Javascript document.createElement? I have looked at tutorials (such as: https://codeburst.io/learn-how-to-create-ht...t-4f1323f96252) but can't seem get it working for my application.
Much appreciated, kind regards, Tony
--------------
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>*{box-sizing: border-box;}body{font-family: Arial, Helvetica, sans-serif;}/* Float four columns side by side */.column{float: left; width: 25%; padding: 0 10px;}/* Remove extra left and right margins, due to padding */.row{margin: 0 -5px;}/* Clear floats after the columns */.row:after{content: ""; display: table; clear: both;}/* Responsive columns */@media screen and (max-width: 600px){.column{width: 100%; display: block; margin-bottom: 20px;}}/* Style the counter cards */.card{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; background-color: #f1f1f1;}</style>
</head>
<body>
<div class="row">
<div class="column">
<div class="card">
<h3>Card 1</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 2</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 3</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 4</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
</div>
</body>
</html>
--------------------
Seems like the HTML has lost its tab spacing formating for my post:/
Full Version: Create column cards using DOM elements
QUOTE(DutchTony @ May 18 2020, 12:20 PM) 
I am trying to auto-generate HTML column/row cards through the use of DOM elements.
I think this tutorial explains the principle fairly well, though it creates an HTML table: https://developer.mozilla.org/en-US/docs/We..._DOM_Interfaces
QUOTE
Can anybody help me out to convert the following HTML to Javascript document.createElement?
From where does the text you want in each card come from? It doesn't make sense to create it all with javascript, then you might as well use static HTML in the first place.
QUOTE
Seems like the HTML has lost its tab spacing formating for my post:/
You need to format code examples, e.g. with the #-button at the top of the textarea you type in. See also examples in https://forums.htmlhelp.com/index.php?index...amp;CODE=bbcode
QUOTE(Christian J @ May 18 2020, 12:16 PM)
QUOTE(DutchTony @ May 18 2020, 12:20 PM)
I am trying to auto-generate HTML column/row cards through the use of DOM elements.
I think this tutorial explains the principle fairly well, though it creates an HTML table: https://developer.mozilla.org/en-US/docs/We..._DOM_Interfaces
QUOTE
Can anybody help me out to convert the following HTML to Javascript document.createElement?
From where does the text you want in each card come from? It doesn't make sense to create it all with javascript, then you might as well use static HTML in the first place.
QUOTE
Seems like the HTML has lost its tab spacing formating for my post:/
You need to format code examples, e.g. with the #-button at the top of the textarea you type in. See also examples in https://forums.htmlhelp.com/index.php?index...amp;CODE=bbcode
Thanks Christian, that was very helpful. I have now managed to write the javascript as follows (the card content will be pulled from an array).
I still have a remaining question, what is good practice in terms of indenting to keep the javascript readible? I have attached the screenshot as an example (as I still can't seem to transfer tabs or spaces in the HTML below.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>*{box-sizing: border-box;}body{font-family: Arial, Helvetica, sans-serif;}/* Float four columns side by side */.column{float: left; width: 25%; padding: 0 10px;}/* Remove extra left and right margins, due to padding */.row{margin: 0 -5px;}/* Clear floats after the columns */.row:after{content: ""; display: table; clear: both;}/* Responsive columns */@media screen and (max-width: 600px){.column{width: 100%; display: block; margin-bottom: 20px;}}/* Style the counter cards */.card{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; background-color: #f1f1f1;}</style>
</head>
<script>
var body = document.getElementsByTagName("body")[0];
for (var y=0; y<2; y++){ // creates rows
var createRow = document.createElement("div");
for (var x=0; x<4; x++){ // creates columns
var createColumn = document.createElement("div");
var createCard = document.createElement("div");
var createText = document.createElement("p");
var cellText = document.createTextNode("test");
createText.appendChild(cellText);
createCard.appendChild(createText);
createColumn.appendChild(createCard);
createRow.appendChild(createColumn);
body.appendChild(createRow);
createCard.setAttribute("class", "card");
createColumn.setAttribute("class", "column");
}
createRow.setAttribute("class", "row");
}
</script>
<body>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>*{box-sizing: border-box;}body{font-family: Arial, Helvetica, sans-serif;}/* Float four columns side by side */.column{float: left; width: 25%; padding: 0 10px;}/* Remove extra left and right margins, due to padding */.row{margin: 0 -5px;}/* Clear floats after the columns */.row:after{content: ""; display: table; clear: both;}/* Responsive columns */@media screen and (max-width: 600px){.column{width: 100%; display: block; margin-bottom: 20px;}}/* Style the counter cards */.card{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; background-color: #f1f1f1;}</style>
</head>
<script>
var body = document.getElementsByTagName("body")[0];
for (var y=0; y<2; y++){ // creates rows
var createRow = document.createElement("div");
for (var x=0; x<4; x++){ // creates columns
var createColumn = document.createElement("div");
var createCard = document.createElement("div");
var createText = document.createElement("p");
var cellText = document.createTextNode("test");
createText.appendChild(cellText);
createCard.appendChild(createText);
createColumn.appendChild(createCard);
createRow.appendChild(createColumn);
body.appendChild(createRow);
createCard.setAttribute("class", "card");
createColumn.setAttribute("class", "column");
}
createRow.setAttribute("class", "row");
}
</script>
<body>
</body>
</html>
QUOTE(DutchTony @ May 18 2020, 03:36 PM)
I still have a remaining question, what is good practice in terms of indenting to keep the javascript readible?
In general programming, there seem to be different schools: https://en.wikipedia.org/wiki/Indentation_style
Javascripts that are meant to be human-readable usually seem to be formatted similar to the K&R(?) style in the link above, with space characters for indenting. Personally I prefer something like the Allman style, I think it's is easier to read. Also I use tabs for indenting, since it reduces typing (possibly these tabs are replaced with space characters on this forum?).
But it seems most web developers just download readymade libraries these days, where all formatting is removed to reduce bandwidth. But obviously such libraries are not meant to be human-readable.
QUOTE
I have attached the screenshot as an example (as I still can't seem to transfer tabs or spaces in the HTML below.
Seems the "HTML" BBCode tags remove indenting. I normally use the "CODE" tags instead:
CODE
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>*{box-sizing: border-box;}body{font-family: Arial, Helvetica, sans-serif;}/* Float four columns side by side */.column{float: left; width: 25%; padding: 0 10px;}/* Remove extra left and right margins, due to padding */.row{margin: 0 -5px;}/* Clear floats after the columns */.row:after{content: ""; display: table; clear: both;}/* Responsive columns */@media screen and (max-width: 600px){.column{width: 100%; display: block; margin-bottom: 20px;}}/* Style the counter cards */.card{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; background-color: #f1f1f1;}</style>
</head>
<script>
var body = document.getElementsByTagName("body")[0];
for (var y=0; y<2; y++){ // creates rows
var createRow = document.createElement("div");
for (var x=0; x<4; x++){ // creates columns
var createColumn = document.createElement("div");
var createCard = document.createElement("div");
var createText = document.createElement("p");
var cellText = document.createTextNode("test");
createText.appendChild(cellText);
createCard.appendChild(createText);
createColumn.appendChild(createCard);
createRow.appendChild(createColumn);
body.appendChild(createRow);
createCard.setAttribute("class", "card");
createColumn.setAttribute("class", "column");
}
createRow.setAttribute("class", "row");
}
</script>
<body>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>*{box-sizing: border-box;}body{font-family: Arial, Helvetica, sans-serif;}/* Float four columns side by side */.column{float: left; width: 25%; padding: 0 10px;}/* Remove extra left and right margins, due to padding */.row{margin: 0 -5px;}/* Clear floats after the columns */.row:after{content: ""; display: table; clear: both;}/* Responsive columns */@media screen and (max-width: 600px){.column{width: 100%; display: block; margin-bottom: 20px;}}/* Style the counter cards */.card{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; background-color: #f1f1f1;}</style>
</head>
<script>
var body = document.getElementsByTagName("body")[0];
for (var y=0; y<2; y++){ // creates rows
var createRow = document.createElement("div");
for (var x=0; x<4; x++){ // creates columns
var createColumn = document.createElement("div");
var createCard = document.createElement("div");
var createText = document.createElement("p");
var cellText = document.createTextNode("test");
createText.appendChild(cellText);
createCard.appendChild(createText);
createColumn.appendChild(createCard);
createRow.appendChild(createColumn);
body.appendChild(createRow);
createCard.setAttribute("class", "card");
createColumn.setAttribute("class", "column");
}
createRow.setAttribute("class", "row");
}
</script>
<body>
</body>
</html>
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.