如何向div内动态追加inner div并绑定点击修改父div背景色的函数

原有代码问题汇总 #

• 缺失jQuery依赖引入，代码中使用的$选择器、DOM操作方法均为jQuery语法，使用前需要先引入jQuery库
• DOM就绪事件写法错误，jQuery标准就绪事件写法为$(document).ready(function(){})
• append方法语法错误，缺少括号包裹要插入的DOM节点内容
• 遍历多个.mydiv元素时未做逐个处理，直接拼接字符串时$(this)指向上下文错误，引号嵌套存在语法问题
• 点击事件中获取父元素的逻辑错误，未定义的parent变量无法指向当前点击元素的父容器，需使用$(this).parent()获取
• css方法传参格式错误，修改单个样式可使用css(属性名, 属性值)的写法，传对象需用大括号包裹
• CSS属性名无需大写，不符合前端编码规范

修正后完整代码 #

<!doctype html>
<html>
<head>
<style>
.mydiv{
  position: relative;
  width: 600px;
  height: 200px;
  border: 2px solid red;
}
.decorate{
  position: absolute;
  top: 5px;
  left: 400px;
  width: 100px;
  height: 40px;
  background: #eee;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}
</style>
<!-- 此处引入jQuery库，可替换为本地引入地址 -->
<script src="jquery.min.js"></script>
</head>
<body>
<div id ='container'>
  <div class ='mydiv' id='div1'> </div>
  <div class ='mydiv' id='div2'> </div>
  <div class ='mydiv' id='div3'> </div>
  <div class ='mydiv' id='div4'> </div>
</div>

<script type ='text/javascript'>
$(document).ready(function(){
  // 遍历每个.mydiv元素，追加inner div
  $('.mydiv').each(function(){
    $(this).append(`<div id="${$(this).attr('id')}_decorate" class="decorate">Decorate</div>`);
  })
  // 绑定点击事件
  $('.decorate').click(function (){
    $(this).parent().css('background', 'blue');
  });
});
</script>
</body>
</html>

原生JS实现版本（无需引入jQuery） #

如果不想引入额外依赖，可替换原有script逻辑为原生JS代码：

document.addEventListener('DOMContentLoaded', function(){
  const mydivs = document.querySelectorAll('.mydiv');
  mydivs.forEach(div => {
    const innerDiv = document.createElement('div');
    innerDiv.className = 'decorate';
    innerDiv.id = div.id + '_decorate';
    innerDiv.textContent = 'Decorate';
    innerDiv.addEventListener('click', function(){
      div.style.background = 'blue';
    });
    div.appendChild(innerDiv);
  })
})

内容的提问来源于stack exchange，提问作者Shamala Larry