尝试使用Javascript将HTML元素插入另一个HTML元素

时间:2017-12-16 18:10:22

标签: javascript jquery html format output

  

大家好,所以iam尝试使用Javascript将HTML元素插入另一个HTML元素。

我尝试使用.insertAdjacentHTML,但是它将它插入目标元素附近,因为这些位置不适合我...而.html将其插入为文本格式而不是HTML格式

这是我尝试编码的内容: -

   SendClientMessage(COLORS_.white, "15px", "none", '<div class="ls-files">' + CMDS_List + '</div>');
   function SendClientMessage(color, font, align = 'none', message)
   {
      if(align !== "none")
      {
         output_.insertAdjacentHTML('beforeend', '<p style="color: ' + color + '; font-size: ' + font + '; text-align: ' + align + ';">' + message + '</p>'); 
      }
      else if(align === "none")
      {
         output_.insertAdjacentHTML('beforeend', '<p style="color: ' + color + '; font-size: ' + font + ';">' + message + '</p>'); 
      }
   }

输出: -

<p style="color: #FFFFFF; font-size: 15px;"></p>
<div class="ls-files">clear,clock,dati,ping,uname,whoami,cmd,</div>

1 个答案:

答案 0 :(得分:1)

您只能使用insertAdjacentHTML将 span a 等内联元素放入 p 标记,因为它使用的是检查的HTML解析器在插入内容之前格式正确的html。

&#13;
&#13;
let CMDS_List = 'clear,clock,dati,ping,uname,whoami,cmd,';

SendClientMessage('white', "15px", "none", '<span class="ls-files">' + CMDS_List + '</span>');

function SendClientMessage(color, font, align = 'none', message) {
  let output_ = document.getElementById('output');
  if (align !== "none") {
    output_.insertAdjacentHTML('beforeend', '<p style="color: ' + color + '; font-size: ' + font + '; text-align: ' + align + ';">' + message + '</p>');
  } else if (align === "none") {
    output_.insertAdjacentHTML('beforeend', '<p style="color: ' + color + '; font-size: ' + font + ';">' + message + '</p>');
  }
}
&#13;
  body {
  background: #999;
&#13;
<div id="output"></div>
&#13;
&#13;
&#13;