使用 jQuery 创建 DOM 元素

Question

我有一个功能

       $(document).ready(function () {
        $("#btnhighlight").click(function () {
            var htext = $("#txthighlighttext").val();
            $("#lstCodelist option").each(function () {
                var sp = $(this).text(); 
                var sp1 = sp.split(' ');
                $.each(sp1, function (i, l) {
                    if (l == htext) {
                        var boldText = "<div style=\"background-color: yellow; display: inline; font-weight: bold;\">" + htext + "</div>";
                        $(document).append(boldText);
                    }
                });
            });
        });
    });

，我更新了代码，但没有运气。 在这段代码中，我需要创建一个 DOM 元素来将黄色应用于该元素。

请任何人帮助我如何创建 dom 元素。

谢谢

Answer 1

我不明白 l 在当前代码中的位置。无论如何，您可以使用 jQuery 创建一个 DOM 元素，如下所示：var myel = $('

')。 等函数将 myel 附加到 DOM 中您想要的任何位置。

然后，您可以使用 .appendTo()、.after() >编辑

您似乎试图突出显示 元素内的某些单词。我怀疑这是否适用于所有浏览器，因为表单元素在 CSS 方面有点棘手。您可以尝试这样的操作（未经测试）：

$(document).ready(function () {
    $("#btnhighlight").click(function () {
        var htext = $("#txthighlighttext").val();
        $("#lstCodelist option").each(function () {
            var sp = $(this).text();
                var re = new RegExp("\\b" + htext + "\\b")
                sp = sp.replace(re, '<span class="highlighted">$1</span>', "gi");
                $(this).html(sp);
        });
    });
});

您的页面上还需要一些 CSS，定义 .highlighted

UPDATE AFTER CHAT

我使用 得到了一些工作>

而不是 ，以排除表单元素样式问题：

http://jsfiddle.net/GTydh/3/

更新后的js（以防fiddle被删除）：

$(document).ready(function () {
    $("#btnhighlight").click(function () {
        var htext = $("#txthighlighttext").val();
        //$("#lstCodelist option").each(function () {
        $("p").each(function () {
            var sp = $(this).text();
            var re = new RegExp("\\b(" + htext + ")\\b")
            var sOpen = "<span class='highlight'>";
            var sClose = "</span>";
            var newhtml = sp.replace(re, sOpen + "$1" + sClose, "gi");
            $(this).html(newhtml);
        });
    });
});

Answer 2

像这样的东西吗？

$(document).append($('<div />').css('color', 'yellow'));

这会将一个黄色的新 div 添加到文档中。如果您需要将其添加到特定元素，只需使用 $('#myselector') 而不是 $(document)

Answer 3

它很简单

var newEl = $('<div THE_ATTRIBUTES_YOU_WANT></div>');
$('THE_ELEMENT_YOU_WANT_TO_APPEND_OR_ADD').append(newEl);