浅谈Element.insertAdjacentHTML（）

最新推荐文章于 2022-10-05 19:55:24 发布

zouyunchong

最新推荐文章于 2022-10-05 19:55:24 发布

阅读量331

点赞数

分类专栏： javascript 文章标签： html javascript

本文链接：https://blog.csdn.net/zouyunchong/article/details/107600521

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

接口的insertAdjacentHTML()方法Element将指定的文本解析为HTML或XML，并将结果节点插入DOM树中的指定位置。它不会重新解析正在使用该元素的元素，因此不会破坏该元素内部的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作要快得多

语法：element.insertAdjacentHTML(position, text);

position

‘beforebegin’：element本身之前。
‘afterbegin’：就在element第一个孩子之前。
‘beforeend’：就在的element最后一个孩子之后。
‘afterend’：之后element本身。
text要解析为HTML或XML并将其插入树中的字符串。
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>表单验证默认样式修改</title>
</head>
<style>
    .oneline{line-height: 1.5;margin:10px auto;}
    .oneline label{width:100px;text-indent: 15px;font-size:14px;font-family: "Microsoft Yahei";display: inline-block;}
    .oneline .sinput{width:60%;height:30px;border-radius: 6px;border:1px solid #e2e2e2;}
    .oneline input[type="submit"]{margin-left:20px;width:80px;height:30px;border:0;background-color:#5899d0;color:#fff;font-size:14px;border-radius: 6px;}
    .error-message{color:red; font-size:12px;text-indent:108px;}
</style>

<body>
    <form id="forms">
        <div class="oneline">
            <label for="name">用户名:</label>
            <input id="name" name="name" class="sinput" required>
        </div>
        <div class="oneline">
            <label for="email">Email:</label>
            <input id="email" name="email" class="sinput" type="email" required>
        </div>
        <div class="oneline">
            <input type="submit" value="提交" id="thesubmit">
        </div>
    </form>
    <script>
    function replaceValidationUI(form) {
  //阻止表单的默认气泡
        form.addEventListener("invalid", function(event) {
            event.preventDefault();
        }, true);
 //阻止submit提交
        form.addEventListener("submit", function(event) {
            if (!this.checkValidity()) {
                event.preventDefault();
            }
        }, true);
         //submit监听事件
        var submitButton = document.getElementById("thesubmit");
        submitButton.addEventListener("click", function(event) {
              //获取所有没有符合验证的信息
            var inValidityField = form.querySelectorAll(":invalid"),
               //所有错误信息
                errorMessage = form.querySelectorAll(".error-message"),
                   //定义承载错误信息的变量
                parent;
  //循环所有错误信息 并删除
            for (var i = 0; i < errorMessage.length; i++) {
                errorMessage[i].parentNode.removeChild(errorMessage[i]);
            }
              //添加新的错误信息
            for (var i = 0; i < inValidityField.length; i++) {
                 //选中错误信息的父级元素
                parent = inValidityField[i].parentNode;
                    //向父级元素子节点插入错误信息  就在的element最后一个孩子之后。 validationMessage 错误信息
                **parent.insertAdjacentHTML("beforeend", "<div class='error-message'>" + inValidityField[i].validationMessage + "</div>")**
            }
            if (inValidityField.length > 0) {
                  //如果有错误信息  给第一错误元素焦点
                inValidityField[0].focus();
            }
        })
    }
    var form = document.getElementById("forms");
    replaceValidationUI(form);
    </script>
</body>

</html>

zouyunchong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈Element.insertAdjacentHTML（）

接口的insertAdjacentHTML()方法Element将指定的文本解析为HTML或XML，并将结果节点插入DOM树中的指定位置。它不会重新解析正在使用该元素的元素，因此不会破坏该元素内部的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作要快得多语法：element.insertAdjacentHTML(position, text);position‘beforebegin’：element本身之前。‘afterbegin’：就在element第一个孩子之前。‘bef
复制链接

扫一扫

专栏目录