javascript - 使用 Javascript 在特定 div 下面添加 div

Question

我有一些显示一些内容的类名 fawas。实际上我必须在 java script 中的 Div 下面添加一些内容。请帮助我。

<div class="fawas">
    this is my name fawas khan.
</div>

我的 JavaScript 代码是

var dynamic = "这是我的联系电话。"; var _body = document.getElementsByTagName('body') [0].innerHTML =dynamic;

我得到的只是一个附加的div。

Answer 1

在纯 javaScript 中，通过 className 获取元素是丑陋的。请参阅如何在 JavaScript 中按类获取元素？了解更多信息。

基本上，你会想要这个功能：

function getElementsByClass(tagType, className) {
    var elems = document.getElementsByTagName(tagType);
    var returns = [];
    for (var i in elems) {
        if ((' ' + elems[i].className + ' ').indexOf(' ' + className + ' ') > -1) {
            returns.push(elems[i]);
        }
    }
    return returns;
}

一旦你有了它，剩下的就不是太糟糕了：

var dynamic = document.createElement("div");
dynamic.innerHTML = "this is my contact number.";

var elements = getElementsByClass("div", "fawas");
if (elements.length > 0) {
    // just change the first, as you did in your post
    elements[0].parentNode.insertBefore(dynamic, elements[0].nextSibling);
}

我动态创建您的新 div，而不仅仅是一个文本字符串。

然后，我得到你想要插入的元素的父元素insertBefore，在你选择的元素之后使用这个函数。

这是一个工作小提琴。

正如其他人向您展示的那样，使用 jQuery 可以更简洁。不知道node.js有没有功能会更方便，所以给出了纯JS的方案。

Answer 2

如果您对 jQuery 解决方案感兴趣，这里有一个Fiddle

<div class="fawas">
  this is my name fawas khan.
</div>


$(function(){
  var dynamic = ('this is my contact number.');
  $('.fawas').after('<div class="fawas2">'+dynamic+'</div>');
});

Answer 3

你的 html 应该是，

<div class="fawas">
    this is my name fawas khan.
</div>
<div id="fawas-2">
</div>

你的脚本应该是，

<script type="text/javascript">
var dynamic = "this is my contact number."; 
document.getElementById('fawas-2').innerHTML =dynamic;
</script>

Answer 4

你可以这样做

var oldcontent = document.getElementsByTagName('body') [0].innerHTML;

document.getElementsByTagName('body') [0].innerHTML = oldcontent + dynamic

您要添加的内容在哪里动态