Question

我有一个标题的代码如下：

<div id="title-text">
    The Cuttlefisher Paradise
</div>
<div id="choices">
    <ul>
        <li id="home"><a href="#">Home</a></li>
        <li id="contact"><a href="#">Contact</a></li>
        <li id="about"><a href="#">About</a></li>
        <!-- 5 more items -->
    </ul>
</div>

我希望这是关于10个不同网页的标题。由于图形原因，我无法使用<frame>或<iframe>。

有关我想要做的示例，我目前正在使用document.getElementById("home").setAttribute("class", "active")来设置活动标签的样式，但是当使用{{1}将标题（上面的代码块）插入div时}，innerHTML不起作用（返回null）。

将标题（不包含document.getElementById或<frame>）放在多个网页上或让<iframe>查找使用document.getElementById插入的ID的简单方法是什么？

Answer 1

如果您将所有内容放入单个javascript字符串并获得所有引用和换行符以使其成为合法的javascript字符串，那么将它分配给innerHTML应该没有问题，浏览器将解析所有标记和为您创建HTML。

你可以在这里看到它：http://jsfiddle.net/jfriend00/QmGvF/。

从页面就绪处理程序调用的Javascript代码：

var newHTML = '<div id="title-text"> \
    The Cuttlefisher Paradise \
</div> \
<div id="choices"> \
    <ul> \
        <li id="home"><a href="#">Home</a></li> \
        <li id="contact"><a href="#">Contact</a></li> \
        <li id="about"><a href="#">About</a></li> \
        <!-- 5 more items --> \
    </ul> \
</div>';

document.getElementById("top").innerHTML = newHTML;

var home = document.getElementById("home");
home.style.backgroundColor = "#FF0000";

如何使用JavaScript为使用innerHTML插入的文本设置样式

1 个答案: