html
Establecer el código html dentro del objetivo;
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js@4.5.26/dist/ofa.min.js"></script>
<div id="target1">
<span style="color:green;">target 1</span>
</div>
<div id="target2">origin text</div>
<br>
<div id="logger" style="border:red solid 1px;padding:8px;"></div>
<script>
setTimeout(()=> {
$('#target2').html = `<b style="color:blue;">new text</b>`;
console.log($("#target1").text) // => <span style="color:green;">target 1</span>;
$("#logger").html = $("#target1").html;
}, 500);
</script>
Nota:
html es un método peligroso, si se coloca un script se ejecutará automáticamente el código javascript interno, por lo que se debe tener precaución al utilizarlo para prevenir el XSS.
Uso de la sintaxis de plantilla
Todavía puedes usar el atributo :html en la plantilla para establecer el valor de atributo correspondiente en el elemento objetivo. Esto es especialmente útil en la renderización de componentes. A continuación se muestra un ejemplo:
<template component>
<div>Rendered html:
<span :html="txt" style="color:red;"></span>
</div>
<script>
export default {
tag: "html-demo",
data: {
txt: "I am txt"
},
ready(){
setTimeout(()=>{
this.txt = "<b style='color:blue;'>change txt</b>";
}, 500);
}
};
</script>
</template>