<div class="row data">
<div class="subdiv">
<div class="check"><input type="checkbox" name="buy" value="260" checked="" onclick="javascript:basket.checkItem();"> </div>
<div class="img"><img src="./img/basket1.jpg" width="60"></div>
<div class="pname">
<span>TX2</span>
</div>
</div>
<div class="subdiv">
<div class="num">
<div class="updown">
<input type="text" name="p_num1" id="p_num1" size="2" maxlength="4" class="p_num" value="2" onkeyup="javascript:basket.changePNum(1);">
<span onclick="javascript:basket.changePNum(1);"><i class="fas fa-arrow-alt-circle-up up"></i></span>
<span onclick="javascript:basket.changePNum(1);"><i class="fas fa-arrow-alt-circle-down down"></i></span>
</div>
</div>
</div>
<div class="subdiv">
<div class="basketcmd"><a href="javascript:void(0)" class="abutton" onclick="javascript:basket.delItem();">삭제</a></div>
</div>
</div>I saw the way using DOMParser().parseFromString, but this solution requires me to convert html code into one line string. Is there better way to convert or skills to make html code to string easily?
my final goal is to use appendChild() so that I can have many "row data" class div. which requires me to make html code to DOM.
As others have stated, going from strings to HTML in JavaScript is dangerous, as it can result in easy-to-exploit XSS (Cross-Site Scripting) vulnerabilities.
If you want to create an element safely, we can do so as follows.
let clicks = 0;
const container = document.createElement("div");
container.setAttribute("class", "container");
const heading = document.createElement("h1");
heading.textContent = "Created & Appended, Click Me!";
heading.addEventListener("click", (event) => {
heading.textContent = `Clicked ${++clicks} Times`;
});
container.append(heading);
document.body.append(container);We can create elements with createElement, set any attribute with setAttribute, modify the classes with classList or setAttribute, and set the text node content with textContent. By doing this, we can prevent XSS.
We can even add events using addEventListener.