如何根据用户HTML输入创建文档对象?

时间:2014-06-27 20:42:50

标签: javascript jquery html css dom

我有一个textarea意在接受用户HTML输入,我的目的是从该HTML中取出所有内联样式和样式标记。

我最初想过将整个事情改成字符串并做我需要的事情,但后来我意识到我可以使用DOM。

无论如何我可以在用户输入的textarea中用HTML创建一个DOM对象吗?

这样我就可以遍历输入的DOM并删除内联样式&样式标记,向这些元素添加类/ ID,并在某些生成的CSS中应用这些样式。

我可以在文本区域中从HTML创建DOM的第一部分获得一些帮助吗?它甚至可能吗?

3 个答案:

答案 0 :(得分:0)

从HTML创建一个jQuery对象。

var stringHTML = $('.html-textarea').val(); //string of textarea contents

$html = $(stringHTML);

然后你可以做任何你需要的jQuery操作(遍历等)。

答案 1 :(得分:0)

您应该可以使用内置的innerHTML函数执行此操作。不需要图书馆。

答案 2 :(得分:0)

您可以在容器中定义CSS样式属性,如下所示:

<style id="myStyles">

  div.headerStyle  {
    font-family: helvetica;
    width: 500px;
    background-color: #FFFFFF;
    margin-left: 2.5em;  
    margin-top: 1.5em
  }

  h1.titleFont {
    color: #000080;
    width: 500px;
    font-family: helvetica;
    text-align: center;
  }

</style>

然后你可以将这些样式元素包含在这样的自定义DOM元素中:

<script>
  function updateTextArea( content ) {
     var html = '<textarea class="myStyle">';
     html += content;
     html += '</textarea>';
     document.getElementById("myTextArea").innerHTML = html;
  }
</script>