Question

我正在尝试学习javascript，但我坚持一个非常简单的问题。我尝试了很多东西3个小时但没有成功。

我必须在div“form-control-tag-inner”下面插入这个span标记：

<span class="label label-default"><span class="text-">nick</span><span class="close close-tag" aria-hidden="true">×</span><input type="hidden" name="participants[nick]" value="nick"></span>

和html代码：

<div class="form-group" id="receiver">
    <label for="conv-dest">Receivers (Max 100)</label>
    <div class="form-control-tag">
        <div class="form-control-tag-inner">

        <!--- Here i need to insert span tag -->

        <input tabindex="1" type="text" autocomplete="on" class="filtre-tag" id="conv-dest" placeholder="Add">
        </div>
    </div>
</div>

Answer 1

以下是添加跨度以及将事件附加到新添加内容的能力的代码：

<div class="form-group" id="receiver">
    <label for="conv-dest">Receivers (Max 100)</label>
    <div class="form-control-tag">
        <div class="form-control-tag-inner">
           <input tabindex="1" type="text" autocomplete="on" class="filtre-tag" id="conv-dest" placeholder="Add">
        </div>
    </div>
</div>

{{1}}

Answer 2

＆＃13;

<div class="form-group" id="receiver">
  <label for="conv-dest">Receivers (Max 100)</label>
  <div class="form-control-tag">
    <div class="form-control-tag-inner">

      <p>This is a paragraph <span style="color:#FF0000;">
         This is a paragraph</span>This is a paragraph</p>

      <p><span style="color:#8866ff;">
         This is another paragraph</span></p>

      <input tabindex="1" type="text" autocomplete="on" class="filtre-tag" id="conv-dest" placeholder="Add">
    </div>
  </div>
</div>

＆＃13;

以上作为使用span标记的示例。如果您正在寻找其他任何事情请解释。

由于

Answer 3

只是另一种选择。您也可以使用DOMParser()，将简单的HTML字符串转换为DOM对象。

DOMParser() Docs

var span = '<span class="label label-default"><span class="text-">nick</span><span class="close close-tag" aria-hidden="true">×</span><input type="hidden" name="participants[nick]" value="nick"></span>',
    form = document.querySelector('.form-control-tag-inner'),
    nick = new DOMParser().parseFromString(span,'text/html').firstChild;
form.insertBefore(nick,form.firstChild);

<div class="form-group" id="receiver">
    <label for="conv-dest">Receivers (Max 100)</label>
    <div class="form-control-tag">
        <div class="form-control-tag-inner">

        <!--- Here i need to insert span tag -->

        <input tabindex="1" type="text" autocomplete="on" class="filtre-tag" id="conv-dest" placeholder="Add">
        </div>
    </div>
</div>

在<div>下面添加<span>

3 个答案: