如何在 Div 中动态添加段落？

Question

I have this code which creates a div element:

 var div = document.createElement("div");
 var attr = document.createAttribute("id");
 attr.value="container";
 div.setAttributeNode(attr);
 document.body.appendChild(div);

How can I add the Paragraph tag inside of the Div element dynamically?

It should look like this:

<div id="container"
    <p class="album"><h2>1975</h2></p>
</div>

Answer 1

You could create another variable to house the element you're trying to create. Consider this:

var div = document.createElement("div");
var attr = document.createAttribute("id");
var p = document.createElement("p"); //create the paragraph tag
p.classList += 'album'; // give it a class by adding to the list
p.innerHTML = '<h2>1975</h2>'; // add html text or make another element if needed.
attr.value="container";
div.setAttributeNode(attr);
div.appendChild(p); add the <p> element to the div 
document.body.appendChild(div);

You create the needed element with document.createElement() the set the needed attributes, classes, etc. Then once you have it setup you append the element variable to the parent element, like the div in this case. You can follow this pattern to generate as much html as needed dynamically in JavaScript.

You can do the same with the <h2> element as well, like this:

var h2Element = document.createElement('h2');
h2Element.innerText = '1975';
p.appendChild(h2Element);

The p variable houses the paragraph tag and the h2Element houses the content for that tag. However, I'd recommend that if you want an <h2> for the text it should be separate from the <p> as they are separate elements. For exmaple and h2 is a heading level two used before a paragraph, which is what a <p> is.