Javascript 檢查是否<p>存在於<div>
[英]Javascript Check if <p> exists in <div>
問題描述
我對 Javascript 完全陌生。 當第一次將鼠標懸停在 div 上時，我試圖在 div（其中包含數字 0）中創建 ap 標簽，並且在每次鼠標懸停期間 p 標簽中的數字都會增加。
如何使用 if-else 語句首先檢查 p 標簽是否在 div 中？
<script>
function increaseNum(x){
var i;
if (document.getElementById('mcount').contains("p")){
i++;
}else{
number = document.createElement("P");
mcount.appendChild(number);
i=0;
}
number.innerHTML = i;
}
</script>
<html>
<div id="mcount" onmouseover="increaseNum(this)"></div>
</html>
任何形式的幫助表示贊賞！ 先感謝您！
5 個解決方案
解決方案1
2 2020-03-20 13:41:29
檢查
<p>存在於<div>
我們可以使用以下方法檢查：
var number = document.querySelector('#mcount p')
if (number !== null) {
console.log('<p> exists in <div>')
} else {
console.log('<p> does not exists in <div> yet.')
}
接下來，您可以使用document.querySelector更新您的代碼，如下所示：
var i; function increaseNum(x) { var mcount = document.querySelector('#mcount'); var number = document.querySelector('#mcount p'); if (number !== null) { i++; } else { var elem = document.createElement("P"); mcount.appendChild(elem); number = document.querySelector('#mcount p'); i = 0; } number.innerHTML = i; } increaseNum(0);
p{font-size:2rem;padding-left:1rem;border:1px solid #eee}
<div id="mcount" onmouseover="increaseNum(this)"></div>
此外， document.getElementById('mcount').contains("p")不正確，因為Node.contains()方法僅適用於節點元素，但在這里您只是傳遞像"p"這樣的字符串。 所以，我們可以在這里使用document.querySelector('#mcount p') ，它會一直為null直到p被添加到#mcount節點，之后它不會為空，我們可以在if..else邏輯中使用它。
解決方案2
0 2020-03-20 13:43:31
在if condition使用document.querySelector('#dfp-tlb p') != null
解決方案3
0 2020-03-20 14:07:42
請找到另一個答案：
let i=0; //get the div tag var mcount = document.querySelector('#mcount'); mcount.textContent=i; function increaseNum() { //getting the number of p tags present in div var number = document.querySelectorAll('#mcount p').length; if (number){ console.log(`Numner of p tags are : ${i}`); } //Creating the node and appending var elem = document.createElement("P"); i ++; elem.appendChild(document.createTextNode(i)) mcount.appendChild(elem); }
div{ background-color: black; color: white; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="mcount" onmouseover="increaseNum()"></div> <script src="script.js"></script> </body> </html>
解決方案4
0 2020-03-20 14:07:45
const setup = () => { const exist = document.querySelector('#mccount p') !== null; const existChild = document.querySelector('#mccount > p') !== null; console.log(exist); console.log(existChild); } window.addEventListener('load', setup);
<div id="mccount"> <div> <p> </p> </div> </div>
解決方案5
0 2020-03-20 14:23:03
您可以做的另一種僅適用於兒童的替代方法是玩節點。 我仍然不會推薦這個解決方案。 但它存在：
const setup = () => { const mccount = document.querySelector('#mccount') console.log(mccount); const existChild = [...mccount.childNodes].some(node => node.nodeName === 'P'); console.log(existChild); } window.addEventListener('load', setup);
document.querySelector('#mccount p') !== null或document.querySelector('#mccount > p') !== null會更容易使用。
Electron 無法執行 Javascript 檢查 Div 是否存在
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.