如何仅使用 JavaScript 来创建 HTML 代码？
How do I use just JavaScript to create HTML code?
我一直在尝试使用纯 JavaScript（否 jQuery）在容器中重新创建 HTML 内容。但是，当我 运行 时，网页上什么也没有显示。我在网上做了很多研究，但仍然没有运气。谁能帮我看看？
p.s。抱歉我的代码又长又乱。如果你能帮我指出我在函数或格式的哪一部分做错了，并告诉我正确的方法，那就太好了！谢谢！
这是我要复制的原始代码：
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Nothing clicked yet!</h3>
<button type="button" class="btn btn-default btn-lg">Star</button>
<hr>
<div>
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
<button type="button" class="btn btn-default">7</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">8</button>
</div>
</div>
<hr>
<div>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
</div>
</div>
这是我目前的情况：
function myFunction() {
var makeDiv = document.createElement('DIV');
var makeHead = document.createElement('H3');
var makeBTN = document.createElement('BUTTON');
var swapH3 = function swap() {
//locate button textNode then use it to replace the text inside of h3;
};
var rowDiv = document.getElementById("container").appendChild("makeDiv");
rowDiv.className = "row";
rowDiv.id = "row";
var colDiv = document.getElementById('row').appendChild('makeDiv');
colDiv.className = "col-md-12";
colDiv.id = "col";
var head = document.getElementById('col').appendChild('makeHead');
head.id = "head";
head.createTextNode('Nothing clicked Yet!');
var btn0 = document.getElementById('col').appendChild('makeBTN');
btn0.id = "btn0";
btn0.className = "btn btn-default btn-lg on";
btn0.createTextNode = ('star');
btn0.type = "button";
btn0.onclick = swapH3;
document.getElementById('col').appendChild(document.createElement(HR));
var btng1 = document.getElementById('col').appendChild('makeDIV');
btng1.id = 'btng1';
document.getElementById('col').appendChild(document.createElement(HR));
var btng2 = document.getElementById('col').appendChild('makeDIV');
btng2.id = 'btng2';
var btngA = document.getElementById('btng1').appendChild('makeDIV');
btngA.id = 'btngA';
btngA.className = 'btn-group';
var btngB = document.getElementById('btng1').appendChild('makeDIV');
btngB.id = 'btngB';
btngB.className = 'btn-group';
var btngC = document.getElementById('btng1').appendChild('makeDIV');
btngC.id = 'btngC';
btngC.className = 'btn-group';
var btngD = document.getElementById('btng2').appendChild('makeDIV');
btngD.id = 'btngD';
btngD.className = 'btn-group btn-group-lg';
var btn1 = document.getElementById('btngA').appendChild('makeBTN');
btn1.className = 'btn btn-default';
btn1.type = 'button';
btn1.createTextNode = ('1');
btn1.onclick = swapH3;
var btn2 = document.getElementById('btngA').appendChild('makeBTN');
btn2.className = 'btn btn-default';
btn2.type = 'button';
btn2.createTextNode = ('2');
btn2.onclick = swapH3;
var btn3 = document.getElementById('btngA').appendChild('makeBTN');
btn3.className = 'btn btn-default';
btn3.type = 'button';
btn3.createTextNode = ('3');
btn3.onclick = swapH3;
var btn4 = document.getElementById('btngA').appendChild('makeBTN');
btn4.className = 'btn btn-default';
btn4.type = 'button';
btn4.createTextNode = ('4');
btn4.onclick = swapH3;
var btn5 = document.getElementById('btngB').appendChild('makeBTN');
btn5.className = 'btn btn-default';
btn5.type = 'button';
btn5.createTextNode = ('5');
btn5.onclick = swapH3;
var btn6 = document.getElementById('btngB').appendChild('makeBTN');
btn6.className = 'btn btn-default';
btn6.type = 'button';
btn6.createTextNode = ('6');
btn6.onclick = swapH3;
var btn7 = document.getElementById('btngB').appendChild('makeBTN');
btn7.className = 'btn btn-default';
btn7.type = 'button';
btn7.createTextNode = ('7');
btn7.onclick = swapH3;
var btn8 = document.getElementById('btngC').appendChild('makeBTN');
btn8.className = 'btn btn-default';
btn8.type = 'button';
btn8.createTextNode = ('8');
btn8.onclick = swapH3;
var btnLeft = document.getElementById('btngD').appendChild('makeBTN');
btnLeft.className = 'btn btn-default';
btnLeft.type = 'button';
btnLeft.createTextNode = ('Left');
btnLeft.onclick = swapH3;
var btnMiddle = document.getElementById('btngD').appendChild('makeBTN');
btnMiddle.className = 'btn btn-default';
btnMiddle.type = 'button';
btnMiddle.createTextNode = ('Middle');
btnMiddle.onclick = swapH3;
var btnRight = document.getElementById('btngD').appendChild('makeBTN');
btnRight.className = 'btn btn-default';
btnRight.type = 'button';
btnRight.createTextNode = ('Right');
btnRight.onclick = swapH3;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="container">
</div>
每次要追加元素时都必须调用 document.createElement。此外，您不应该将字符串传递给 appendChild。你应该传递什么 document.createElement returns。此外，createTextNode 是 document 的函数，它 returns 是您必须自己附加到元素的文本节点。您的代码应该类似于：
var rowDiv = document.createElement("DIV");
document.getElementById("container").appendChild(rowDiv);
rowDiv.className = "row";
rowDiv.id = "row";
var colDiv = document.createElement("DIV");
document.getElementById("row").appendChild(colDiv);
colDiv.className = "col-md-12";
colDiv.id = "col";
var head = document.createElement("H3");
document.getElementById("col").appendChild(head);
head.id = "head";
head.appendChild(document.createTextNode('Nothing clicked Yet!'));
那里有很多很棒的模板系统。就个人而言，我喜欢 handlebarsjs，但我相信其他人也有很好的收藏。你应该检查一下。
除此之外，我发现有时仅将 html 构建为文本并使用它比构建单独的 DOM 节点更容易。
var html = [];
html.push("<div class=\"row\">");
html.push("<div class=\"col-xs-6\">A</div>");
html.push("<div class=\"col-xs-6\">B</div>");
html.push("</div>");
document.getElementById("container").innerHTML = html.join("");
.col-xs-6 {
min-height: 3em !important;
border: solid 1px;
background-color: aliceblue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="container" class="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">></script>
使用JavaScript创建HTML:
正在创建 HTML 个元素：
每个 HTML element 必须先专门创建。
有多种方法可以做到这一点。最常用的是：
- 使用 document.createElement() 创建元素。
var myDiv = document.createElement("div");
myDiv 将是对您刚刚创建的元素的引用。该元素还不是 DOM 的一部分。如果你想让它显示，你需要将它添加到 DOM.
- 将一个 HTML 字符串分配给另一个元素的
innerHTML 属性。
containingElement.innerHTML = "<div id="divA"><div id="divB">Some Text"</div></div>";
直接将 HTML 文本添加到 DOM 存在各种潜在问题。特别是，如果您要添加的 HTML 文本的任何部分不是从程序中硬编码的字符串派生的，就会存在安全问题。
根据您分配的内容，通过分配给 innerHTML. 重复更改 DOM 的大部分可能会出现性能问题
- 将文本分配给另一个元素的
textContent 属性。这将删除任何其他 children 并创建一个文本节点作为元素的唯一 child。
elementToHaveText.textContent = "The text I want in this element."
- 使用
cloneNode()创建节点副本，或节点及其所有children。
var theCopy = nodeToCopy.cloneNode() //thecopy will be a copy of nodeToCopy.
var theCopy = nodeToCopy.cloneNode(true) //Create a copy of nodeToCopy and all children.
- 使用
insertAdjacentHTML()创建元素，同时使用HTML文本将它们插入到DOM中。此方法提供了对插入从 HTML 文本生成的元素的更多控制。在 many/some 情况下，它会比其他类型的节点生成和插入更快。 HTML 是相对于引用元素插入的。您可以在引用元素之前、作为 children（在开头或结尾）或之后插入 HTML。
refEl.insertAdjacentHTML('afterend',"<div id="A"><div id="B">Some Text"</div></div>");
此方法具有相同的安全问题并分配给 innerHTML 关于直接转换 HTML 未在您的程序中硬编码的文本。
还有其他方法可以创建 HTML 元素。您需要查看 documents, nodes and elements.
的文档
添加元素到 DOM:
为了使 HTML 元素可见，必须将其添加到 DOM。有多种方法可以将元素添加到 DOM。最常用的是：
- 使用创建节点并将它们同时插入到 DOM 中的方法。您可以这样做：
- 将一个 HTML 字符串分配给另一个元素的
innerHTML 属性。
- 使用
insertAdjacentHTML() 创建元素并将其插入 DOM 使用 HTML 文本。
- 使用
appendChild()将child添加到children的元素列表的末尾。
element.appendChild(aChild);
- 使用
insertBefore() 将 child 添加到 parent 之前的另一个 child parent。
parentNode.insertBefore(aChild, referenceChild);
- 使用
replaceChild()替换parent节点的child。
parentNode.replaceChild(aChild, oldChild);
与创建元素一样，还有其他方法可以将元素添加到 DOM。您需要查看 documents, nodes and elements.
的文档
您不能在 DOM 中多次使用相同的元素。如果您尝试这样做，您尝试添加到第二个位置的元素将从其在 DOM 中的当前位置移动到您要插入它的位置。这是移动元素而不是显式删除它然后 re-adding 它在另一个位置的正常方法。
如果你想添加具有 children 的元素，你要么必须使用创建和插入 HTML 文本的方法之一一次创建它们，要么你需要引用您创建的节点，以便在以后添加 children 时使用它们。拥有一个引用您创建的 parent 节点的变量比必须搜索该节点的 DOM 以添加 children 效率要高得多。
关于您的代码：
- 当您应该传递 element.
时，您将 字符串 传递给 appendChild()
- 您正在使用
document.getElementById() 来尝试获取对您刚刚创建的元素的引用。
- None 个元素的 ID 在 HTML 中。您添加 ID 似乎只是为了使用
document.getElementById() 来查找您创建的元素。
- 如果您需要对您创建的元素的引用，您应该保留通过创建该元素获得的引用。执行一堆完全不需要的额外处理（搜索元素）是不好的做法。
- 您永远不需要调用
document.getElementById() 来获取对您在需要引用的同一函数中创建的元素的引用。
- 您正在使用
createTextNode()。
- 这是
document, not element的一个方法。
- 为了您的使用，将唯一的 child 节点设置为单个文本 child 节点，直接分配给
Element.textContent. 效率更高
- 您已经创建了变量
makeDiv、makeHead 和 makeBTN，每次您引用该变量时，您似乎都试图将其多次用作不同的元素.它不按照您编码的方式工作。如所写，每种类型只创建一个元素。您不能在 DOM 中的多个位置使用相同的元素。
- 每个元素都必须专门创建。虽然还有其他方法可以创建单独的元素（例如
cloneNode()），但最常见的是 document.createElement().
- 你写的线性代码太多了。你的元素非常相似。您应该对此进行编码，以便创建它们是模块化的。
根据你的问题，我不清楚你是在尝试创建你提供的完整 HTML 代码，还是在尝试从 <div> 创建所有内容class="row" 并将其添加到 <div> 和 class="container" 中的 DOM。我假设您正在尝试创建整个 HTML.
我还假设您想要问题中列出的 HTML 而没有 JavaScript.
中的附加属性
这里有一些代码可以创建您正在寻找的 HTML：
function createDesiredHtmlElements() {
function createDiv(theClass) {
var div = document.createElement("div");
if(typeof theClass === "string") {
div.className = theClass;
}
return div;
}
function createButton(text,theClass,type) {
var button = document.createElement("button");
type = (typeof type === "undefined") ? "button" : type;
theClass = (typeof theClass === "undefined") ? "btn btn-default" : theClass;
button.setAttribute("type",type);
button.className = theClass;
button.textContent = text;
return button;
}
function createButtonGroupDiv(buttonsText,divClass) {
buttonsText = (typeof buttonsText === "string") ? [buttonsText] : buttonsText;
divClass = (typeof divClass === "undefined") ? "btn-group" : divClass;
var div = createDiv(divClass);
if(Array.isArray(buttonsText)) {
buttonsText.forEach(function(buttonText) {
div.appendChild(createButton(buttonText));
});
}
return div;
}
//Actually create the HTML:
var mainDiv = createDiv("container");
var rowDiv = mainDiv.appendChild(createDiv("row"));
var colDiv = rowDiv.appendChild(createDiv("col-md-12"));
colDiv.appendChild(document.createElement("h3")).textContent = "Nothing clicked yet!";
colDiv.appendChild(createButton("Star","btn btn-default btn-lg"));
colDiv.appendChild(document.createElement("hr"));
var midDiv = colDiv.appendChild(createDiv());
midDiv.appendChild(createButtonGroupDiv(["1","2","3","4"]));
midDiv.appendChild(createButtonGroupDiv(["5","6","7"]));
midDiv.appendChild(createButtonGroupDiv("8"));
colDiv.appendChild(document.createElement("hr"));
var midDiv2 = colDiv.appendChild(createDiv());
midDiv2.appendChild(createButtonGroupDiv(["Left","Middle","Right"]
,"btn-group btn-group-lg"));
return mainDiv;
}
如果您随后执行以下操作：
var theDiv = createDesiredHtmlElements();
console.log(theDiv.outerHTML);
您将看到 HTML:
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Nothing clicked yet!</h3>
<button class="btn btn-default btn-lg" type="button">Star</button>
<hr>
<div>
<div class="btn-group">
<button class="btn btn-default" type="button">1</button>
<button class="btn btn-default" type="button">2</button>
<button class="btn btn-default" type="button">3</button>
<button class="btn btn-default" type="button">4</button>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button">5</button>
<button class="btn btn-default" type="button">6</button>
<button class="btn btn-default" type="button">7</button>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button">8</button>
</div>
</div>
<hr>
<div>
<div class="btn-group btn-group-lg">
<button class="btn btn-default" type="button">Left</button>
<button class="btn btn-default" type="button">Middle</button>
<button class="btn btn-default" type="button">Right</button>
</div>
</div>
</div>
</div>
</div>
注意上面的代码实际上并没有把创建的HTML放到DOM中。您尚未指定 HTML 创建后要执行的操作。
我一直在尝试使用纯 JavaScript（否 jQuery）在容器中重新创建 HTML 内容。但是，当我 运行 时，网页上什么也没有显示。我在网上做了很多研究，但仍然没有运气。谁能帮我看看？
p.s。抱歉我的代码又长又乱。如果你能帮我指出我在函数或格式的哪一部分做错了，并告诉我正确的方法，那就太好了！谢谢！
这是我要复制的原始代码：
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Nothing clicked yet!</h3>
<button type="button" class="btn btn-default btn-lg">Star</button>
<hr>
<div>
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
<button type="button" class="btn btn-default">7</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">8</button>
</div>
</div>
<hr>
<div>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
</div>
</div>
这是我目前的情况：
function myFunction() {
var makeDiv = document.createElement('DIV');
var makeHead = document.createElement('H3');
var makeBTN = document.createElement('BUTTON');
var swapH3 = function swap() {
//locate button textNode then use it to replace the text inside of h3;
};
var rowDiv = document.getElementById("container").appendChild("makeDiv");
rowDiv.className = "row";
rowDiv.id = "row";
var colDiv = document.getElementById('row').appendChild('makeDiv');
colDiv.className = "col-md-12";
colDiv.id = "col";
var head = document.getElementById('col').appendChild('makeHead');
head.id = "head";
head.createTextNode('Nothing clicked Yet!');
var btn0 = document.getElementById('col').appendChild('makeBTN');
btn0.id = "btn0";
btn0.className = "btn btn-default btn-lg on";
btn0.createTextNode = ('star');
btn0.type = "button";
btn0.onclick = swapH3;
document.getElementById('col').appendChild(document.createElement(HR));
var btng1 = document.getElementById('col').appendChild('makeDIV');
btng1.id = 'btng1';
document.getElementById('col').appendChild(document.createElement(HR));
var btng2 = document.getElementById('col').appendChild('makeDIV');
btng2.id = 'btng2';
var btngA = document.getElementById('btng1').appendChild('makeDIV');
btngA.id = 'btngA';
btngA.className = 'btn-group';
var btngB = document.getElementById('btng1').appendChild('makeDIV');
btngB.id = 'btngB';
btngB.className = 'btn-group';
var btngC = document.getElementById('btng1').appendChild('makeDIV');
btngC.id = 'btngC';
btngC.className = 'btn-group';
var btngD = document.getElementById('btng2').appendChild('makeDIV');
btngD.id = 'btngD';
btngD.className = 'btn-group btn-group-lg';
var btn1 = document.getElementById('btngA').appendChild('makeBTN');
btn1.className = 'btn btn-default';
btn1.type = 'button';
btn1.createTextNode = ('1');
btn1.onclick = swapH3;
var btn2 = document.getElementById('btngA').appendChild('makeBTN');
btn2.className = 'btn btn-default';
btn2.type = 'button';
btn2.createTextNode = ('2');
btn2.onclick = swapH3;
var btn3 = document.getElementById('btngA').appendChild('makeBTN');
btn3.className = 'btn btn-default';
btn3.type = 'button';
btn3.createTextNode = ('3');
btn3.onclick = swapH3;
var btn4 = document.getElementById('btngA').appendChild('makeBTN');
btn4.className = 'btn btn-default';
btn4.type = 'button';
btn4.createTextNode = ('4');
btn4.onclick = swapH3;
var btn5 = document.getElementById('btngB').appendChild('makeBTN');
btn5.className = 'btn btn-default';
btn5.type = 'button';
btn5.createTextNode = ('5');
btn5.onclick = swapH3;
var btn6 = document.getElementById('btngB').appendChild('makeBTN');
btn6.className = 'btn btn-default';
btn6.type = 'button';
btn6.createTextNode = ('6');
btn6.onclick = swapH3;
var btn7 = document.getElementById('btngB').appendChild('makeBTN');
btn7.className = 'btn btn-default';
btn7.type = 'button';
btn7.createTextNode = ('7');
btn7.onclick = swapH3;
var btn8 = document.getElementById('btngC').appendChild('makeBTN');
btn8.className = 'btn btn-default';
btn8.type = 'button';
btn8.createTextNode = ('8');
btn8.onclick = swapH3;
var btnLeft = document.getElementById('btngD').appendChild('makeBTN');
btnLeft.className = 'btn btn-default';
btnLeft.type = 'button';
btnLeft.createTextNode = ('Left');
btnLeft.onclick = swapH3;
var btnMiddle = document.getElementById('btngD').appendChild('makeBTN');
btnMiddle.className = 'btn btn-default';
btnMiddle.type = 'button';
btnMiddle.createTextNode = ('Middle');
btnMiddle.onclick = swapH3;
var btnRight = document.getElementById('btngD').appendChild('makeBTN');
btnRight.className = 'btn btn-default';
btnRight.type = 'button';
btnRight.createTextNode = ('Right');
btnRight.onclick = swapH3;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="container">
</div>
每次要追加元素时都必须调用 document.createElement。此外，您不应该将字符串传递给 appendChild。你应该传递什么 document.createElement returns。此外，createTextNode 是 document 的函数，它 returns 是您必须自己附加到元素的文本节点。您的代码应该类似于：
var rowDiv = document.createElement("DIV");
document.getElementById("container").appendChild(rowDiv);
rowDiv.className = "row";
rowDiv.id = "row";
var colDiv = document.createElement("DIV");
document.getElementById("row").appendChild(colDiv);
colDiv.className = "col-md-12";
colDiv.id = "col";
var head = document.createElement("H3");
document.getElementById("col").appendChild(head);
head.id = "head";
head.appendChild(document.createTextNode('Nothing clicked Yet!'));
那里有很多很棒的模板系统。就个人而言，我喜欢 handlebarsjs，但我相信其他人也有很好的收藏。你应该检查一下。
除此之外，我发现有时仅将 html 构建为文本并使用它比构建单独的 DOM 节点更容易。
var html = [];
html.push("<div class=\"row\">");
html.push("<div class=\"col-xs-6\">A</div>");
html.push("<div class=\"col-xs-6\">B</div>");
html.push("</div>");
document.getElementById("container").innerHTML = html.join("");
.col-xs-6 {
min-height: 3em !important;
border: solid 1px;
background-color: aliceblue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="container" class="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">></script>
使用JavaScript创建HTML:
正在创建 HTML 个元素：
每个 HTML element 必须先专门创建。
有多种方法可以做到这一点。最常用的是：
- 使用 document.createElement() 创建元素。
var myDiv = document.createElement("div");
myDiv将是对您刚刚创建的元素的引用。该元素还不是 DOM 的一部分。如果你想让它显示，你需要将它添加到 DOM. - 将一个 HTML 字符串分配给另一个元素的
innerHTML属性。
containingElement.innerHTML = "<div id="divA"><div id="divB">Some Text"</div></div>";
直接将 HTML 文本添加到 DOM 存在各种潜在问题。特别是，如果您要添加的 HTML 文本的任何部分不是从程序中硬编码的字符串派生的，就会存在安全问题。
根据您分配的内容，通过分配给innerHTML. 重复更改 DOM 的大部分可能会出现性能问题
- 将文本分配给另一个元素的
textContent属性。这将删除任何其他 children 并创建一个文本节点作为元素的唯一 child。
elementToHaveText.textContent = "The text I want in this element." - 使用
cloneNode()创建节点副本，或节点及其所有children。
var theCopy = nodeToCopy.cloneNode() //thecopy will be a copy of nodeToCopy.
var theCopy = nodeToCopy.cloneNode(true) //Create a copy of nodeToCopy and all children. - 使用
insertAdjacentHTML()创建元素，同时使用HTML文本将它们插入到DOM中。此方法提供了对插入从 HTML 文本生成的元素的更多控制。在 many/some 情况下，它会比其他类型的节点生成和插入更快。 HTML 是相对于引用元素插入的。您可以在引用元素之前、作为 children（在开头或结尾）或之后插入 HTML。
refEl.insertAdjacentHTML('afterend',"<div id="A"><div id="B">Some Text"</div></div>");此方法具有相同的安全问题并分配给innerHTML关于直接转换 HTML 未在您的程序中硬编码的文本。
还有其他方法可以创建 HTML 元素。您需要查看 documents, nodes and elements.
的文档添加元素到 DOM:
为了使 HTML 元素可见，必须将其添加到 DOM。有多种方法可以将元素添加到 DOM。最常用的是：
- 使用创建节点并将它们同时插入到 DOM 中的方法。您可以这样做：
- 将一个 HTML 字符串分配给另一个元素的
innerHTML属性。 - 使用
insertAdjacentHTML()创建元素并将其插入 DOM 使用 HTML 文本。
- 将一个 HTML 字符串分配给另一个元素的
- 使用
appendChild()将child添加到children的元素列表的末尾。
element.appendChild(aChild); - 使用
insertBefore()将 child 添加到 parent 之前的另一个 child parent。
parentNode.insertBefore(aChild, referenceChild); - 使用
replaceChild()替换parent节点的child。
parentNode.replaceChild(aChild, oldChild);
与创建元素一样，还有其他方法可以将元素添加到 DOM。您需要查看 documents, nodes and elements.
的文档您不能在 DOM 中多次使用相同的元素。如果您尝试这样做，您尝试添加到第二个位置的元素将从其在 DOM 中的当前位置移动到您要插入它的位置。这是移动元素而不是显式删除它然后 re-adding 它在另一个位置的正常方法。
如果你想添加具有 children 的元素，你要么必须使用创建和插入 HTML 文本的方法之一一次创建它们，要么你需要引用您创建的节点，以便在以后添加 children 时使用它们。拥有一个引用您创建的 parent 节点的变量比必须搜索该节点的 DOM 以添加 children 效率要高得多。
关于您的代码：
- 当您应该传递 element. 时，您将 字符串 传递给
- 您正在使用
document.getElementById()来尝试获取对您刚刚创建的元素的引用。- None 个元素的 ID 在 HTML 中。您添加 ID 似乎只是为了使用
document.getElementById()来查找您创建的元素。 - 如果您需要对您创建的元素的引用，您应该保留通过创建该元素获得的引用。执行一堆完全不需要的额外处理（搜索元素）是不好的做法。
- 您永远不需要调用
document.getElementById()来获取对您在需要引用的同一函数中创建的元素的引用。
- None 个元素的 ID 在 HTML 中。您添加 ID 似乎只是为了使用
- 您正在使用
createTextNode()。- 这是
document, notelement的一个方法。 - 为了您的使用，将唯一的 child 节点设置为单个文本 child 节点，直接分配给
Element.textContent. 效率更高
- 这是
- 您已经创建了变量
makeDiv、makeHead和makeBTN，每次您引用该变量时，您似乎都试图将其多次用作不同的元素.它不按照您编码的方式工作。如所写，每种类型只创建一个元素。您不能在 DOM 中的多个位置使用相同的元素。- 每个元素都必须专门创建。虽然还有其他方法可以创建单独的元素（例如
cloneNode()），但最常见的是document.createElement().
- 每个元素都必须专门创建。虽然还有其他方法可以创建单独的元素（例如
- 你写的线性代码太多了。你的元素非常相似。您应该对此进行编码，以便创建它们是模块化的。
appendChild()
根据你的问题，我不清楚你是在尝试创建你提供的完整 HTML 代码，还是在尝试从 <div> 创建所有内容class="row" 并将其添加到 <div> 和 class="container" 中的 DOM。我假设您正在尝试创建整个 HTML.
我还假设您想要问题中列出的 HTML 而没有 JavaScript.
中的附加属性这里有一些代码可以创建您正在寻找的 HTML：
function createDesiredHtmlElements() {
function createDiv(theClass) {
var div = document.createElement("div");
if(typeof theClass === "string") {
div.className = theClass;
}
return div;
}
function createButton(text,theClass,type) {
var button = document.createElement("button");
type = (typeof type === "undefined") ? "button" : type;
theClass = (typeof theClass === "undefined") ? "btn btn-default" : theClass;
button.setAttribute("type",type);
button.className = theClass;
button.textContent = text;
return button;
}
function createButtonGroupDiv(buttonsText,divClass) {
buttonsText = (typeof buttonsText === "string") ? [buttonsText] : buttonsText;
divClass = (typeof divClass === "undefined") ? "btn-group" : divClass;
var div = createDiv(divClass);
if(Array.isArray(buttonsText)) {
buttonsText.forEach(function(buttonText) {
div.appendChild(createButton(buttonText));
});
}
return div;
}
//Actually create the HTML:
var mainDiv = createDiv("container");
var rowDiv = mainDiv.appendChild(createDiv("row"));
var colDiv = rowDiv.appendChild(createDiv("col-md-12"));
colDiv.appendChild(document.createElement("h3")).textContent = "Nothing clicked yet!";
colDiv.appendChild(createButton("Star","btn btn-default btn-lg"));
colDiv.appendChild(document.createElement("hr"));
var midDiv = colDiv.appendChild(createDiv());
midDiv.appendChild(createButtonGroupDiv(["1","2","3","4"]));
midDiv.appendChild(createButtonGroupDiv(["5","6","7"]));
midDiv.appendChild(createButtonGroupDiv("8"));
colDiv.appendChild(document.createElement("hr"));
var midDiv2 = colDiv.appendChild(createDiv());
midDiv2.appendChild(createButtonGroupDiv(["Left","Middle","Right"]
,"btn-group btn-group-lg"));
return mainDiv;
}
如果您随后执行以下操作：
var theDiv = createDesiredHtmlElements();
console.log(theDiv.outerHTML);
您将看到 HTML:
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Nothing clicked yet!</h3>
<button class="btn btn-default btn-lg" type="button">Star</button>
<hr>
<div>
<div class="btn-group">
<button class="btn btn-default" type="button">1</button>
<button class="btn btn-default" type="button">2</button>
<button class="btn btn-default" type="button">3</button>
<button class="btn btn-default" type="button">4</button>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button">5</button>
<button class="btn btn-default" type="button">6</button>
<button class="btn btn-default" type="button">7</button>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button">8</button>
</div>
</div>
<hr>
<div>
<div class="btn-group btn-group-lg">
<button class="btn btn-default" type="button">Left</button>
<button class="btn btn-default" type="button">Middle</button>
<button class="btn btn-default" type="button">Right</button>
</div>
</div>
</div>
</div>
</div>
注意上面的代码实际上并没有把创建的HTML放到DOM中。您尚未指定 HTML 创建后要执行的操作。