如何在javascript中将具有特定类的<strong>标签动态添加到<div>答案

【问题标题】：How to dynamically add a <strong> tag with a specific class to <div> in javascript如何在javascript中将具有特定类的<strong>标签动态添加到<div>
【发布时间】：2013-07-19 12:13:47
【问题描述】：

下面是一个div，它将在调用javascript函数onmouseoveragent时显示。我需要在 div 中显示姓名和电话号码。我设法动态显示名称，但不知道如何在我的函数中添加电话并指定其类。

<div id="visit">
    <div id="name" class="Class1">
        <strong class="Class2">Phone: 0123456789
        </strong> <%--need this to be added dynamically--%>
    </div>
</div>


<script language="javascript" type="text/javascript">
    function onmouseoveragent(e) {

        var hint = document.getElementById("visit");
        var inner = document.getElementById("name");

        inner.appendChild(inner.ownerDocument.createTextNode("I am a name!"))      
        while (inner.childNodes.length > 1) {
            inner.removeChild(inner.firstChild);
        }

        console.log(hint);
        hint.style.display = 'block';

        hint.style.top = Math.max(el.offsetTop - hint.offsetHeight, 0) + "px";
        hint.style.left = el.offsetLeft + "px";
    };
</script>

【问题讨论】：

标签： javascript html asp.net

【解决方案1】：

可能是这样的：

$('#name').append('<strong class="2">Phone: 3423423</strong>');

【讨论】：

【解决方案2】：

尝试使用document.createElement() 创建span 元素

function onmouseoveragent(e) {

    var hint = document.getElementById("visit");
    var inner = document.getElementById("name");

    while (inner.childNodes.length > 0) {
        inner.removeChild(inner.firstChild);
    }
    inner.appendChild(inner.ownerDocument.createTextNode("I am a name!"))    ;

    var span = document.createElement('span');
    span.className = 'Class2';
    span.innerHTML = 'Phone: 123455';
    inner.appendChild(span)

    console.log(hint);
    hint.style.display = 'block';

    hint.style.top = Math.max(el.offsetTop - hint.offsetHeight, 0) + "px";
    hint.style.left = el.offsetLeft + "px";
};

【讨论】：

非常感谢，它工作得非常好，只是它没有将类应用于跨度（因为这是我定义类的方式：.Class1 strong.Class2.. 需要一点修改）:)

【解决方案3】：

您是否考虑过使用 innerHTML 来设置 'visit' 元素的内容？

只需在字符串代码中构建您想要的内容，包含类、样式和所有内容的 div，然后设置 hint.innerHTML='code'

【讨论】：