2025-04-14

原生 js 图片加载失败处理

# 原生 js 图片加载失败处理

<img src="image.gif" onerror="myFunction(this)" />
<script>
      function myFunction(e) {
        return (e.src = 'https://www.baidu.com/img/flexible/logo/pc/result.png')
      }
</script>

# 图片预加载

css 属性二选一

img {
  display: none;
  visibility: hidden;
}

new image

let img = new Image()
img.src = '图片地址'

# 表单重置

<form onreset="myFunction()">
	输入您的名字: <input type="text">
	<input type="reset">
</form>
<script>
function myFunction() {
    alert("表单已重置");
}
</script

# 插入和删除 html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>菜鸟教程(runoob.com)</title>
  </head>
  <body>
    <ul id="myList">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    <p id="demo">单击按钮插入一个项目列表</p>
    <button onclick="myFunction()">添加html</button>
    <button onclick="rmoveFarge()">删除节点</button>
    <script>
      function myFunction() {
        // 创建一个空节点
        let frag = document.createDocumentFragment()

        var newItem = document.createElement('LI')
        var textnode = document.createTextNode('Water1')
        newItem.appendChild(textnode)
        var list = document.getElementById('myList')
        console.log(list.childNodes[0], 'list.childNodes[0]')
        list.insertBefore(newItem, list.childNodes[0])
      }

      // 移除节点
      function rmoveFarge() {
        var list = document.getElementById('myList')
        let getAllLi = document.getElementsByTagName('li')
        // console.log(getAllLi.length)
        if (!getAllLi.length) return
        list.removeChild(list.childNodes[getAllLi.length - 1])
      }
    </script>
  </body>
</html>

上次更新: 2025-12-04