0

<div class="row data">
  <div class="subdiv">
    <div class="check"><input type="checkbox" name="buy" value="260" checked="" onclick="javascript:basket.checkItem();">&nbsp;</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.

evolutionxbox
  • 3,932
  • 6
  • 34
  • 51
minhongpark
  • 13
  • 4
  • 1
    " but this solution requires me to convert html code into one line string." — No, it doesn't. – Quentin Jan 28 '22 at 09:56
  • What HTML string are you talking about? If you need something from HTML, why do you need to convert it to a string? – evolutionxbox Jan 28 '22 at 09:57
  • Generally going from string to HTML in JS isn't a great idea, there are valid situations to do it, but are you sure it's necessary in your case? – DBS Jan 28 '22 at 10:00
  • um.. so how can I make one more "row data" class div by javascript code? Is there easy way to just write down html code in javascript code so I could use in appendChild() or whatever that can add "row data" class div? – minhongpark Jan 28 '22 at 10:20

1 Answers1

0

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.

Rida F'kih
  • 239
  • 1
  • 6
  • so using DOMParser().parseFromString has a XSS vulnerabilities if I put string in parameter? https://stackoverflow.com/questions/3103962/converting-html-string-into-dom-elements – minhongpark Jan 28 '22 at 10:23
  • @minhongpark It does if it takes any form of user input, whether that's coming from the frontend, backend, whether it be an input field, database, command line, if it contains a users username, name, etc. – Rida F'kih Jan 28 '22 at 10:28