如何動態地將<strong>帶有特定類</strong>的<strong>標簽</strong>添加<strong>到</strong> <div> <strong>在JavaScript中</strong>

Question

下面是一個div ，它將在對javascript函數onmouseoveragent的調用中顯示。 我需要在div中顯示姓名和電話號碼。 我設法動態顯示名稱，但不知道如何添加Phone並在函數中指定其類。

<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>

Answer 1

也許是這樣的：

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

Answer 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";
};

Answer 3

您是否考慮過使用innerHTML設置“ visit”元素的內容？

只需以所需的字符串代碼完全構建所需的內容，帶有類，樣式和所有內容的div，然后設置hint.innerHTML ='code'