0

Me pueden ayudar con el siguiente problema que tengo.

Tengo cierto texto que se puede modificar dentro de un div, lo que no he podido lograr es crear una función que me devuelva algo como lo siguiente:

<div><p style="font-size: 14px;">TEST</p></div>
11
  • Para que se entienda mejor la pregunta muestra los tu html sera mas facil responderte el 4 may. 2018 a las 17:35
  • para editar tu pregunta has clic aquí
    – Rene Limon
    el 4 may. 2018 a las 17:40
  • Podrías adjuntar lo que has intentado hacer hasta ahora o crear un ejemplo?
    – Kleith
    el 4 may. 2018 a las 17:40
  • ¿No será algo así o parecido lo que quieres hacer?
    – A. Cedano
    el 4 may. 2018 a las 17:42
  • Tengo un div de la siguiente manera: <div class="container" > <div class="row"> <div class="col-md-12 tags buttons"></div> </div> <div id="div_text" class="row" contentEditable="true" style=" border : 1px solid; "> PRUEBA <br /> </div> </div> El div "div_text" es donde voy a introducir texto, Lo que deseo es que al darle click en un boton es convertir todo el contenido del div en html con saltos de linea, etiquetas, algo similar a esto <div><p style='font-size : 14;'>PRUEBA</p><BR /></div>
    – PolloKulos
    el 4 may. 2018 a las 17:44

4 respuestas 4

0

Puedes usar la función outerHTML() de jquery:

$('#div_text')[0].outerHTML();
0

Si no te entendí mal, cosa que es posible

Usando jQuery podes vaciar el div con .empty() y luego agregarle el nuevo html con un .append()

Por ejemplo;

$('button').on('click',function(){

    var a = "<div><p style='font-size: 14px; color:red;'>TEST</p></div>";
         
         $('#div_text').empty();
         $('#div_text').append(a);
});

         
     <div id="div_text" class="row" contentEditable="true" style=" border : 1px solid; "> PRUEBA <br /> </div>

<button>Modificar</button>

     <script
     src="https://code.jquery.com/jquery-3.3.1.min.js"
     integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
     crossorigin="anonymous"></script>

     

   

Estaría bueno, que para próximas preguntas, intentes formularlas de manera más clara, porque si la solución es la que planteo, lo más complejo de brindarte la ayuda es interpretar lo que necesitabas!

EDIT

En caso contrario, si lo que necesitas es obtener el html ubicado dentro de un div, podes usar .html()

Por ejemplo;

$('button').on('click',function(){

alert($('.prueba').html());

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prueba">
<p style="color:red;">
Prueba!
</p>
</div>
<button>
Botón
</button>

Espero que sea lo que buscas, saludos!

0

Suponiendo que al modificar el texto en el input genera un html de la siguiente manera <div><p style="font-size: 14px;">TEST</p></div>, entonces una vez que tengas eso, podrías mostrarlo con la función text() de jQuery, por ejemplo:

$('textarea').val('TEST');

// suponemos que esto te devuelve parseado el html
var textarea = '<div><p style="font-size: 14px;">TEST</p></div>';


$('#mostrarhtml code').text(textarea);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea></textarea>

<div id="mostrarhtml">
  <code></code>
</div>

3
  • Eso es lo que busco, solo que no puedo obtener es esta parte : var textarea = '<div><p style="font-size: 14px;">TEST</p></div>';
    – PolloKulos
    el 4 may. 2018 a las 19:18
  • No dijiste que en la pregunta ya tenías ese dato?
    – Kleith
    el 4 may. 2018 a las 19:31
  • No, solo lo puse como ejemplo, pero eso es lo que requiero
    – PolloKulos
    el 4 may. 2018 a las 19:40
0

Solo utiliza el elemento HTML <Code>

var div_entrada = document.getElementById('div_entrada'); 
  document.getElementById("btnMostrar").addEventListener("click", function( event ) {
  var htmlText = div_entrada.innerHTML;
 document.getElementById('result').innerHTML = "";  document.getElementById('result').append(htmlText)
  }, false);
code {
  font-family: monospace;
}
<div id='div_entrada' style="border-style:solid;">
<p>Parraflo</p>
<ul>
    <li>Uno</li>
    <li>Dos</li>
    <li>Tres</li>
    <li>Cuatro</li>
</ul>
</div>
<br>
<br>
<input type="button" value="Mostrar" id="btnMostrar"/>
<br>
<br>
<div  style="border-style:solid;">
<code width="50%" id="result">
</code>
</div>

Element/Code MDN Web Docs

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.