代码
提交代码
<style>
.box {
display: flex;
justify-content: center;
align-items: center;
}
.ele1 {
background: wheat;
width: 200px;
height: 200px;
}
.ele2 {
background: yellowgreen;
width: 100px;
height: 100px;
}
</style>
<div class="box ele1">
<div class="box ele2"></div>
</div>
<div class="result"></div>
<script>
var ele1 = document.querySelector('.ele1');
var ele2 = document.querySelector('.ele2');
var result = document.querySelector('.result');
function getElement(content) {
var el = document.createElement('p');
el.innerText = content;
return el;
}
ele1.addEventListener('click', function() {
result.appendChild(getElement('我是元素ele1'));
}, true);
ele2.addEventListener('click', function() {
result.appendChild(getElement('我是元素ele2'));
});
</script>
运行结果