我如何通过id检查我的DOM是否已经包含元素

How can i check if my DOM already contains an element by id?

本文关键字：是否 包含 元素 DOM 我的 何通过 id 检查      更新时间：2023-09-26

我想知道是否可以检查我的DOM是否包含元素id。实际上，我动态加载我的模板(剑道模板(并将它们附加在我的主体中。

<body>
    ...
    <script type="text/x-kendo-template" id="test-view">
        ...
    </script>
</body>

现在我的加载脚本是

//Creates a gloabl object called templateLoader with a single method "loadExtTemplate"
var templateLoader = (function ($, host) {
    //Loads external templates from path and injects in to page DOM
    return {
        //Method: loadExtTemplate
        //Params: (string) path: the relative path to a file that contains template definition(s)
        loadExtTemplate: function (path) {
            //Use jQuery Ajax to fetch the template file
            var tmplLoader = $.get(path)
                .success(function (result) {
                    //On success, Add templates to DOM (assumes file only has template definitions)
                    var regSplit = new RegExp("[/']+", "g");
                    var pathTab = path.split(regSplit);
                    var templateName = pathTab[pathTab.length - 1];
                    var regReplace = new RegExp("[.]+", "g");
                    var templateName = templateName.replace(regReplace, "-");
                    var s = $("<script type='"text/x-kendo-template'" id='"" + templateName + "'">" + result + "</script>");
                    $("body").append(s);
                })
                .error(function (result) {
                    alert("Error Loading Templates -- TODO: Better Error Handling");
                })
            tmplLoader.complete(function () {
                //Publish an event that indicates when a template is done loading
                $(host).trigger("TEMPLATE_LOADED", [path]);
            });
        }
    };
})(jQuery, document);

在加载我的模板之前，我需要检查这个模板是否已经加载。我需要检查id="test-view"的脚本是否存在。我该怎么做？

var element = $('#' + templateName)
if(!element.length) {
   // create your template
}

我建议添加

if(document.getElementById(templateName)) return;

之后

var templateName = templateName.replace(regReplace, "-");

所以你的代码变成：

.success(function (result) {
    //On success, Add templates to DOM (assumes file only has template definitions)
    var regSplit = new RegExp("[/']+", "g");
    var pathTab = path.split(regSplit);
    var templateName = pathTab[pathTab.length - 1];
    var regReplace = new RegExp("[.]+", "g");
    var templateName = templateName.replace(regReplace, "-");
    if(document.getElementById(templateName)) return;
    var s = $("<script type='"text/x-kendo-template'" id='"" + templateName + "'">" + result + "</script>");
    $("body").append(s);
})

var elementExists = (document.getElementById("elementId") !== null);

elementExists现在将包含一个布尔值，该布尔值告诉元素是否已经存在。

您可以使用长度或大小：

例如

$("#test-view").length //$("#test-view").size()

使用jQuery:

if ($("#test-view").length) {...}

纯JavaScript:

if (document.querySelectorAll("#test-view").length) {...}

还有一些评论：

  • [html4]id不是脚本标记的常规属性(但AFAIK所有浏览器都支持它(
  • 上面的代码适用于任何选择器，而不仅仅适用于id
  • querySelectorAll在IE7中不受支持
相关文章：