Question

我使用javascript createElement()和appendChild()制作了一些代码，但它不起作用。但是，当我应用jQuery方法时，它正常工作。谁能告诉我为什么？

＆＃13;

<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
    function foo1(){
      var test_btn = document.createElement("button").appendChild(document.createTextNode("test_btn"));
      document.getElementById("WhyThisNothing").appendChild(test_btn);
    }
    function foo2(){
      $('#WhyThisNothing').append('<button>test_btn</button>');
    }
    function foo3(){
      $('#WhyThisNothing').append($('<button></button>',{text:"test_btn"}));
    }
    </script>
  </head>
  <body>
    <button onclick="foo1()" id="btn">Click me then error 1:(</button>
    <button onclick="foo2()" id="btn">Click me then ok 2:(</button>
    <button onclick="foo3()" id="btn">Click me then ok 3:(</button>
    <div id="WhyThisNothing"></div>
  </body>
</html>

＆＃13;

Answer 1

appendChild返回附加的子节点，而不是它附加到的父节点。

所以，你必须将文本单独附加到元素上，而不是链接它，因为你剩下的就是textnode

function foo1(){
  var test_btn = document.createElement("button");

  test_btn.appendChild(document.createTextNode("test_btn"));

  document.getElementById("WhyThisNothing").appendChild(test_btn);
}

使用appendChild（）和createElement（）创建HTML DOM元素时只显示纯文本

1 个答案: