No estoy seguro de haber dado el título correcto a mi pregunta, pero quiero pedir que haga algo como:
Quiero obtener contenido HTML del elemento principal. Al hacer esto, esto también incluirá etiquetas HTML de elementos secundarios, pero no quiero eso. Solo quiero niños HTML.
Por ejemplo:
<div class="test"> This is content of div <p class="boring_class" style="borinhdlfj"> This is paragraph<br> content.<span><i>As you<br> can</i></span> see I have added <br> tag</p> </div> del ejemplo anterior Si uso el método jquery .text() para obtener contenido div, solo obtendré texto pero no la etiqueta <br> . Pero si uso .html() jquery, esto también incluirá <p class="boring_class" style='dflkdjf'>....</p> pero no quiero eso.
Solo quiero html del elemento secundario que es: This is paragraph<br> content.As you can see I have added <br> tag .
¿Cómo puedo lograr eso?
El resultado final debería verse así:
This is content of div This is paragraph <br> content.As you can see I have added <br> tagComo una posible interpretación de la pregunta:
Obtenga html de todos los elementos secundarios, incluido el texto [no en los nodos secundarios]
Puede usar .contents() para incluir los nodos de texto del padre (las partes que no están en las etiquetas, por ejemplo, "Esto es contenido de div") y luego recorrerlos para obtener texto o html dependiendo de dónde se encuentre. donación:
var output = $(".test").contents().map((i, e) => { if (e.nodeType == 3) return $(e).text(); return $(e).html() }) .toArray() .join(" "); console.log(output) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="test"> This is content of div <p class="boring_class" style="borinhdlfj"> This is paragraph<br> content.As you can see I have added <br> tag</p> </div>Tenga en cuenta que esto incluye todos los espacios en blanco (nuevas líneas) que no se incluyeron en el resultado del ejemplo de la pregunta, por lo que es posible que deba eliminarlos para obtener una coincidencia exacta.
Puede lograr esto en javascript normal usando innerHTML como se muestra a continuación.
Para obtener más información, consulte: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
const list = document.getElementsByClassName("test")[0]; const inner = list.innerHTML; const noP = inner.replace(/<p[^>]*>/g, "").replace(/<\/p[^>]*>/g, "").replace(/\n/g,''); console.log(noP); <div class="test"> This is content of div <p class="boring_class" style="borinhdlfj"> This is paragraph<br> content.As you can see I have added <br> tag</p> </div>