<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>Vi la forma de usar DOMParser().parseFromString, pero esta solución requiere que convierta el código html en una cadena de una línea. ¿Hay una mejor manera de convertir o habilidades para hacer que el código html se encadene fácilmente?
mi objetivo final es usar appendChild() para poder tener muchos div de clase de "datos de fila". lo que requiere que haga código html para DOM.
Como han dicho otros, pasar de cadenas a HTML en JavaScript es peligroso, ya que puede resultar en vulnerabilidades XSS (Cross-Site Scripting) fáciles de explotar.
Si desea crear un elemento de forma segura, podemos hacerlo de la siguiente manera.
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); Podemos crear elementos con createElement , establecer cualquier atributo con setAttribute , modificar las clases con classList o setAttribute y establecer el contenido del nodo de texto con textContent . Al hacer esto, podemos prevenir XSS.
Incluso podemos agregar eventos usando addEventListener .