使用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解决方案感兴趣，这里有一个小提琴

<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

您要添加动态内容的位置