Question

我正在尝试创建一个脚本，在onload中添加一个div的链接，并且出于某种原因，内容（图像）显示为书面html文本。为什么这样，我该如何纠正呢？

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script language="javascript" type="text/javascript">

        function AffiliateLink() {
            var boxes = document.getElementsByClassName('AffiliateLink'),
                i = boxes.length;

            while (i--) {
                var link = document.createElement('a');
                var content = document.createTextNode(boxes[i].innerHTML);

                link.setAttribute('href', boxes[i].getAttribute('title'));
                link.appendChild(content);

                boxes[i].innerHTML = '';
                boxes[i].appendChild(link);
            }
        }

    </script>
</head>

<body onload="AffiliateLink()">

    <div class="AffiliateLink" title="http://www.google.com">Google</div>
    <div class="AffiliateLink" title="http://www.apple.com"><img src="http://files.softicons.com/download/application-icons/black-icons-by-mike-demetriou/png/128x128/App%20apple%20logo.png"></a></div>

</body>

Answer 1

document.createTextNode强制HTML为文本。只需将一个innerHTML复制到另一个。

http://jsfiddle.net/86fWM/1/

    while (i--) {
        var link = document.createElement('a');

        link.setAttribute('href', boxes[i].getAttribute('title'));
        link.innerHTML = boxes[i].innerHTML;

        boxes[i].innerHTML = '';
        boxes[i].appendChild(link);
    }

Answer 2

因为那明确是您正在创建的textNode，它会明确地处理您为 text 提供的所有内容，而不会解释HTML。如果要设置HTML内容，请使用innerHTML属性：

link.innerHTML = boxes[i].innerHTML;

您是否想要简单地克隆或移动boxes[i]节点而不是将一个innerHTML分配给另一个节点，这是有争议的。

Answer 3

由于您要创建包含html代码的文字节点，因此它们被视为text而不是html。

您可以通过替换

轻松解决此问题

var link = document.createElement('a');
var content = document.createTextNode(boxes[i].innerHTML);

link.setAttribute('href', boxes[i].getAttribute('title'));
link.appendChild(content);

通过

var link = document.createElement('a');
link.setAttribute('href', boxes[i].getAttribute('title'));
link.innerHTML = boxes[i].innerHTML;

Answer 4

超越目标的一种方式。 “创建文本节点”使文本节点。用innerHTML替换它将生成下一个代码：

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script type="text/javascript">

            function AffiliateLink() {
                var boxes = document.getElementsByClassName('AffiliateLink'),
                    i = boxes.length;

                while (i--) {
                    var a = document.createElement('a');
                    var content = boxes[i].innerHTML;

                    a.href = boxes[i].title;
                    a.innerHTML = content;

                    boxes[i].innerHTML = '';
                    console.log (i);
                    boxes[i].appendChild(a);
                }
            }

        </script>
    </head>

    <body onload="AffiliateLink()">

        <div class="AffiliateLink" title="http://www.google.com">Google</div>
        <div class="AffiliateLink" title="http://www.apple.com"><img src="http://files.softicons.com/download/application-icons/black-icons-by-mike-demetriou/png/128x128/App%20apple%20logo.png"></a></div>

    </body>
</html>

为什么内容被写为文本？

4 个答案: