Question

我一直在尝试使用纯JavaScript（没有jQuery ）来重新创建容器中的HTML内容。但是，当我跑步时，网页上没有任何内容。我在网上做了很多研究，但仍然没有运气。谁能帮我看一看？

P.S。抱歉，我的代码冗长而凌乱。如果你能帮我指出我做错了哪部分功能或格式，并告诉我正确的方法会很棒！谢谢！

以下是我要复制的原始代码：

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>

$scope.filterByUID = function(event) {
    if (event.createdBy === user.uid) {
        return true;
    }
    return false;
}

Answer 1

每次想要追加元素时都需要调用document.createElement。此外，您不应该将字符串传递给appendChild。你应该传递document.createElement返回的内容。此外，createTextNode是document的函数，它返回一个您必须自己附加到元素的文本节点。您的代码应该类似于：

  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!'));

Answer 2

使用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>";
直接向DOM添加HTML文本存在各种潜在问题。特别是，如果要添加的HTML文本的任何部分不是从程序中硬编码的字符串派生的，则存在安全问题根据您分配的内容，通过分配到innerHTML重复更改DOM的大部分内容可能会出现性能问题。
将文本分配给另一个元素的textContent属性。这将删除任何其他子节点并创建单个文本节点作为元素的唯一子节点 elementToHaveText.textContent = "The text I want in this element."
使用cloneNode()创建节点或节点及其所有子节点的副本 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文本生成的元素的更多控制。在许多/某些情况下，它将比其他类型的节点生成和插入更快。 HTML是相对于引用元素插入的。您可以在之前，作为子项（在开头或结尾）或在引用元素之后插入HTML refEl.insertAdjacentHTML('afterend',"<div id="A"><div id="B">Some Text"</div></div>"); 此方法存在相同的安全问题，并分配给innerHTML有关您程序中未编码的直接转换HTML文本。

还有其他方法可以创建HTML元素。您需要查看documents，nodes和elements的文档。

向DOM添加元素：
为了使HTML元素可见，必须将其添加到DOM。有多种方法可以向DOM添加元素。最常用的是：

使用既可以创建节点又可以同时将它们插入DOM的方法。您可以这样做：
- 将HTML字符串分配给另一个元素的innerHTML属性。
- 使用insertAdjacentHTML()使用HTML文本创建元素并将其插入DOM。
使用appendChild()将子项添加到元素的子项列表的末尾 element.appendChild(aChild);
使用insertBefore()在父母的另一个孩子之前将孩子添加到父母 parentNode.insertBefore(aChild, referenceChild);
使用replaceChild()替换父节点的子节点 parentNode.replaceChild(aChild, oldChild);

与创建元素一样，还有其他方法可以向DOM添加元素。您需要查看documents，nodes和elements的文档。

您不能多次在DOM中使用相同的元素。如果您尝试这样做，那么您尝试在第二个位置添加的元素将从DOM中的当前位置移动到您插入它的位置。这是移动元素的常规方法，而不是显式删除它，然后将其重新添加到另一个位置。

如果要添加具有子项的元素，您必须使用创建和插入HTML文本的方法之一一次创建所有元素，或者您需要引用您创建的节点才能使用他们在以后添加孩子时。拥有一个变量是一个非常有效的变量，它是对您创建的父节点的引用，而不是为了添加子节点而必须在DOM中搜索该节点。

关于您的代码：

当您传递string时，您正在将appendChild()传递给element。
您正在使用document.getElementById()尝试获取您刚刚创建的元素的引用。
- 您的所有元素都没有HTML中的ID。您似乎只是添加ID，因此您可以使用document.getElementById()来查找您创建的元素。
- 如果您需要对您创建的元素的引用，您应该保留从创建元素中获得的引用。执行一堆完全不需要的额外处理（搜索元素）是不好的做法。
- 您永远不需要执行对document.getElementById()的调用来获取对您在需要引用的同一函数中创建的元素的引用。
您正在使用createTextNode()。
- 这是document的方法，而不是element。
- 为了您的使用，将唯一的子节点设置为单个文本子节点，仅分配给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后指定要对HTML执行的操作。

Answer 3

那里有很多很棒的模板系统。就个人而言，我喜欢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代码？

3 个答案:

使用JavaScript创建HTML：

关于您的代码：