Question

假设您有一些JavaScript（带有JQuery）代码，可以在现有页面中添加一些HTML，例如：

var span = "<span>Text</span>";
some_div_element.append(span);

如果没有硬编码的跨度，有没有办法做到这一点？如果我想添加很大一部分代码，那么在JavaScript代码中间进行硬编码似乎是不对的。

Answer 1

使用jquery加载函数

实际上相当容易

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includehtml").load("loadme.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includehtml"></div>
  </body> 
</html>

这样你可以将你的额外html放在一个不同的html文件中，然后用load函数加载它。 html可以像您希望的那样短或长，而不会膨胀您的原始页面。在这种情况下，loadme.html需要存储在服务器上的相同路径中。

Answer 2

从jQuery .append()文档中，您可以传递.append()一个jQuery元素，如下所示：

$("#some_div_element").append( $("span") );

借助此功能，您可以使用span在HTML中的某个位置轻松构建display:none元素，然后在Javascript代码中获取/编辑/追加它。

Answer 3

如果您不想直接插入html，请使用javascript创建元素，然后单独应用这些属性。但是，您必须编写大量代码。除非你打算重用这些元素，我认为你应该坚持直接插入html。它更简单，更高效。这是一个示例代码：



var btn = document.createElement("BUTTON");        // Create a <button> element
var t = document.createTextNode("CLICK ME");       // Create a text node
btn.appendChild(t);                                // Append the text to <button>
document.body.appendChild(btn);

var btn = document.createElement("BUTTON"); // Create a <button> element var t = document.createTextNode("CLICK ME"); // Create a text node btn.appendChild(t); // Append the text to <button> document.body.appendChild(btn);

Answer 4

然后创建可重复使用的功能？

function getMeSpan(myText) {
  var span = document.createElement('span');
  span.innerText = myText;
  return span;
};

someOtherDIV.appendChild(getMeSpan('hello'));
someOtherDIV.appendChild(getMeSpan('world!'));

使用JQuery添加动态HTML而无需硬编码？

4 个答案: