如何动态添加 HTML 并保留输出格式答案

【问题标题】：How to dynamically add HTML and retain output format如何动态添加 HTML 并保留输出格式
【发布时间】：2020-04-05 13:53:12
【问题描述】：

我正在编写一个带有 HTML 网络套接字的 MUD 客户端，我从 MUD 服务器接收 HTML。本质上将其视为聊天客户端。

当我从 MUD 服务器接收到以两列水平布局呈现的数据时，只有当我一次接收整个数据时它才会起作用，而如果我一次接收一行，它会变得很好将两列格式转换为单列布局。

重现问题的示例代码在这里。我希望有某种解决方案，不需要在将整个字符串添加到 innerHTML 之前组装整个字符串，如第三个解决方案所示。

FF 和 Chrome 中的错误格式相同，这让我希望有解决方案 :-)

<html>
<body>
    <br/><hr/>
    <!-- *** Conversation Output *** -->
    <div id="static" role="log" aria-live="polite" width="100%">
        what it should look like: <br/>
        <table class='twocolhor'>
            <tr><td>&lt;wielded&gt;</td><td><div class='wielded'>a hand mace</div></td></tr>
            <tr><td>&lt;worn about body&gt;</td><td><div class='wielded'>white robes of a healer</div></td></tr>
            <tr><td>&lt;worn on feet&gt;</td><td><div class='wielded'>a pair of sandals</div></td></tr> 
        </table>
    </div>
    <br/><hr/>
    <div id="incomingMsgOutput2" role="log" aria-live="polite" width="100%">
        Sample, this will NOT work<br/>
    </div>
    <br/><hr/>
    <div id="incomingMsgOutput3" role="log" aria-live="polite" width="100%">
        Sample, this will work<br/>
    </div>


</body>
<script>

var obj = document.getElementById("incomingMsgOutput2");


obj.innerHTML += "<table class='twocolhor'>"
obj.innerHTML += "<tr><td>&lt;wielded&gt;</td><td><div class='wielded'>a hand mace</div></td></tr>"
obj.innerHTML += "<tr><td>&lt;worn about body&gt;</td><td><div class='wielded'>white robes of a healer</div></td></tr>"
obj.innerHTML += "<tr><td>&lt;worn on feet&gt;</td><td><div class='wielded'>a pair of sandals</div></td></tr>"
obj.innerHTML += "</table>"


var obj = document.getElementById("incomingMsgOutput3");

obj.innerHTML += "<table class='twocolhor'>" + "<tr><td>&lt;wielded&gt;</td><td><div class='wielded'>a hand mace</div></td></tr>" +
                 "<tr><td>&lt;worn about body&gt;</td><td><div class='wielded'>white robes of a healer</div></td></tr>" +
                 "<tr><td>&lt;worn on feet&gt;</td><td><div class='wielded'>a pair of sandals</div></td></tr>" +
                 "</table>"

</script>
</html>

【问题讨论】：

我最终在服务器端组装了连贯的 HTML 字符串，而不是尝试在客户端组装它。

标签： javascript html

【解决方案1】：

@Michael 我尝试运行代码，似乎关闭了那里的表格标签，HTML 如下所示

<div id="incomingMsgOutput2" role="log" aria-live="polite" width="100%">
Sample, this will NOT work<br>
<table class="twocolhor"></table>&lt;wielded&gt;
<div class="wielded">a hand mace</div>
&lt;worn about body&gt;
<div class="wielded">white robes of a healer</div>
&lt;worn on feet&gt;
<div class="wielded">a pair of sandals</div></div>

发生这种情况是因为“innerHtml”设置了 HTML，因此需要一个有效或格式正确的 HTML。由于标签没有关闭（在第一行，当我们设置 obj.innerHtml 时），所以它关闭了标签以使其看起来像一个有效的 Html，并在我们的例子中导致不正确的行为。

更好的解决方案是创建一个格式正确的字符串，然后将其分配给“innerHtml”。

您可以在下面的链接中找到更好的解释 Javascript - .innerHTML changes auto close tags

我希望这有助于并回答问题。

【讨论】：

感谢您解释发生了什么。你知道有没有一种方法可以让我测试我要添加的字符串是否格式正确？然后我可以等待足够的数据到达，只有在我有一个完全格式良好的字符串后才添加字符串。
我们可以使用简单的正则表达式来测试一个字符串是否是有效的 Html 并继续追加直到生成有效的 Html。 stackoverflow.com/questions/15458876/…，可以在这里帮忙。

【解决方案2】：

当您使用innerHTML 时，您应该一次插入所有 HTML 标记。无论如何，它会在添加新行并清除标签的所有不良使用或打开的标签后呈现所有代码。

你应该使用其他方法，例如DOM修饰符createElement而不是逐行追加。

例子：

function addElement(parentId, elementTag, elementId, html) {
    // Adds an element to the document
    var p = document.getElementById(parentId);
    var newElement = document.createElement(elementTag);
    newElement.setAttribute('id', elementId);
    newElement.innerHTML = html;
    p.appendChild(newElement);
}

【讨论】：