如何使用Javascript同时创建具有可变内容的父元素和子元素答案

【问题标题】：How to use Javascript to create parent and child element at the same time with variable contents如何使用Javascript同时创建具有可变内容的父元素和子元素
【发布时间】：2014-12-10 02:21:20
【问题描述】：

我有一个来自 PHP assoc 数组的 JSON：

Array(
    [0] = > Array(
        [topicid] = > 17
        [entry] = > number 12 this one
        [belongdate] = > 2017 - 06 - 12
        [edittime] = > 2012 - 06 - 18 05: 22: 21
        [User_ID] = > 1
    )
    [1] = > Array(
        [topicid] = > 9
        [entry] = > yeah 11 now
        [belongdate] = > 2017 - 06 - 12
        [edittime] = > 2012 - 06 - 18 05: 22: 02
        [User_ID] = > 1
    )
)

我不直接给你JSON是因为我不知道如何正确打印JSON。

我需要创建父 div 和多个子元素：

        <div name='entrydiv' class='entrydiv'>          
            <h3 name='topich3' class='topich3'>
                entryjson[i]['topicid']
            </h3>
            <p name='entryp' class='entryp'>
                entryjson[i]['entry']
            </p>
            <a name='belongdatea' class='belongdatea' style='display: none;'>
                entryjson[i]['belongdate']
            </a>
            <a name='lastedittimea' class='lastedittimea'>
                entryjson[i]['edittime']
            </a>
        </div>

请注意，内容是来自 JSON 的变量。我已经检查了这个post。但是 .append 方法似乎不支持将变量传递给内容。并且 .appendTo 方法不允许子元素（？）。我非常感谢您的帮助。谢谢。

【问题讨论】：

“但是 .append 方法似乎不支持将变量传递给内容。” 你到底尝试了什么？
好吧，我试过了（也许我只是没做对）topicid=entryjson[i]['topicid']; $("<div name='entrydiv' class='entrydiv'><h3 name='topich3' class='topich3'> topicid</h3></div>").appendTo('#bodydiv');
使用字符串连接。例如var str = "<p name='entryp' class='entryp'>" + entryjson[i]['entry']" + "</p>";
@B7ackAnge7z 哇，我工作得很好。所以这一切都是为了逃避“”。非常感谢。
不，这不是转义引号，而是正确构建字符串。 JavaScript 应该如何知道在您的字符串中，topicid 是对变量的引用（为什么不知道，例如 entrydiv）？它怎么知道你想用它的价值来代替它？不能。

标签： javascript variables element parent-child

【解决方案1】：

这是一个例子。创建这个 DOM 结构：

<div name='entrydiv' class='entrydiv'> 
    <h3 name='topich3' class='topich3'>
       entryjson[i]['topicid']
    </h3>
</div>

你可以使用这个纯 JavaScript 代码：

var mainDiv = document.createElement("div");
mainDiv.name = mainDiv.className = "entrydiv";
document.body.appendChild(mainDiv);

var item = document.createElement("h3");
item.name = item.className = "topich3";
item.innerHTML = entryjson[i]['topicid'];
mainDiv.appendChild(item);

您可以为其他部分添加代码，然后添加一个循环来遍历您的 JSON 以重复。

【讨论】：

【解决方案2】：

如果您想创建以下结构：

<div class="yourClassInHTML">
...
<div>
<img src="thePath"></img>
</div>
...
</div>

那么 .js 代码将是：

var element1 = document.createElement("div");
var element2 = document.createElement("img");
img.src = "thePath";
element1.appendChild(element2);
document.getElementsByClassName("yourClassInHTML")[0].appendChild(element1);

【讨论】：