如何解决insertAdjacentHTML()的空白问题 | 如何解决insertAdjacentHTML

本文介绍了如何解决insertAdjacentHTML()的空白问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我们称这个接口为IHTMLElement，它包含方法:insertAdjacentHTML()

We call the interface IHTMLElement, it contains the method: insertAdjacentHTML()

public void Test(IHTMLElement element)

{IHTMLElement parent = element.parentElement;

parent.insertAdjacentHTML("beforeend", HtmlContent);}

HtmlContent类似于:

The HtmlContent is like:

<option value="9">1                  m</option>

然后它将插入为:
1 m
如何解决该问题以便将其插入为:
1 m?

Then it will insert into as:
1 m
How can I resolve the problem so that to insert into as:
1 m?

PS:首先，我要使用.Replace(" ","&nbsp")，但是它将替换所有空白，例如:"<option**&nbsp**value"

PS: First, I want to use the .Replace(" ","&nbsp"), but it will replace all blank like:"<option**&nbsp**value"

推荐答案

感谢您在此处发布.

方法1:空格替换为物理字符( & nbsp;);
方法2:Shift +空格键并输入空格将与下图中的效果相同.

Method 1: The spaces replace with physical characters(   );
Method 2: Shift +Space and type the space will be the same as the effect in the image below.

这是HTML中的代码

<html>
<head>
    <script type="text/javascript">
        function InsertHTML (select) {
            var selected = select.selectedIndex;
            var where = select.options[selected].text;

            var relTo = document.getElementById ("relTo");
            var htmlToInsert = "The position is 　　　　　　　　ｈｅｌｌｏ　ｗｏｒｌｄ　　　　　　　<b>" + where + "</b>.";

            if (relTo.insertAdjacentHTML) {        // Internet Explorer, Opera, Google Chrome and Safari
                relTo.insertAdjacentHTML (where, htmlToInsert);
            }
            else {
                alert ("Your browser does not support the insertAdjacentHTML method!");
            }
        }
    </script>
</head>
<body>
    <div id="relTo" style="width:300px; background:#e0d0a0;">
        The destination element.
    </div>
    <br /><br />
    Change the selected item to insert HTML formatted text relative to the destination element.
    <select onchange="InsertHTML (this);">
        <option>beforeBegin</option>
        <option>afterBegin</option>
        <option>beforeEnd</option>
        <option selected="selected">afterEnd</option>
    </select>
</body>
</html>

测试结果.

这篇关于如何解决insertAdjacentHTML()的空白问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！