Question

I have this DOM structure (I can't alter the elements(add id,class etc) only add elements)

<td>
    <div></div>
    613-5557896
</td>

I need to insert <a> element before the text. So my final structure will look like this

<td>
    <div></div>
    <a id="111" href="javascript:void(0)"></a>
    613-5557896
</td>

In addition this is a generic function and sometimes the div element is not present at all. I can't guarantee the order. I can't guarantee the structure- the div might not be there or there might be more elements in the after the text node. I need to grab on a text node and insert the element just before it. Probably I need a correct selector to select the text node.

Answer 1

jQuery .contents()返回元素的子元素。使用它来获取td的孩子并使用.filter()过滤所选的子项以仅选择目标文本。最后使用.before()在所选文本后插入HTML。

$("td").contents().filter(function(i, ele){
  return ele.nodeType == 3 && ele.nodeValue.trim() != "";  
}).before('<a id="111" href="javascript:void(0)">link</a>');

＆＃13;

$("td").contents().filter(function(i, ele){
  return ele.nodeType == 3 && ele.nodeValue.trim() != "";  
}).before('<a id="111" href="javascript:void(0)">link</a>');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div></div>
      613-5557896
    </td>
  </tr>
</table>

＆＃13;

因此，如果元素中有多个文本，并且您只想在第一个文本之前插入锚点，请使用.first()从选择器集中选择第一个文本。

$("td").contents().filter(function(i, ele){
    return ele.nodeType == 3 && ele.nodeValue.trim() != "";  
}).first().before('<a id="111" href="javascript:void(0)">link</a>');

＆＃13;

$("td").contents().filter(function(i, ele){
	return ele.nodeType == 3 && ele.nodeValue.trim() != "";  
}).first().before('<a id="111" href="javascript:void(0)">link</a>');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div></div>
      613-5557896
      <div></div>
      613-5557896
    </td>
  </tr>
</table>

＆＃13;

Answer 2

您可以使用JQuery Private Sub myIns_BeforeMinimize(Cancel As Boolean) MessageBox.Show("You are minimizing this inspector.", "Title", MessageBoxButtons.OK, MessageBoxIcon.Information, MessageBoxDefaultButton.Button1, MessageBoxOptions.DefaultDesktopOnly) End Sub（http://api.jquery.com/after/）

JS

#include <iostream>

struct object_array
{
};


template<class...Ts>
struct implement_do_emit
{
    template<class This>
    void operator ()(This *that, const object_array& arg) const;
};


template<class... Ts>
struct MsgpackAdapter
{
    friend class implement_do_emit<Ts...>;

    virtual void do_emit(const object_array& mp_args)
    {
        auto impl = implement_do_emit<Ts...>();
        impl(this, mp_args);
    }

};

template<class T>
struct implement_do_emit<T>
{
    template<class This>
    void operator ()(This *that, const object_array& arg) const
    {
        std::cout << "one type version\n";
    }
};

template<class T1, class T2>
struct implement_do_emit<T1, T2>
{
    template<class This>
    void operator ()(This *that, const object_array& arg) const
    {
        std::cout << "two type version\n";
    }
};


int main()
{
    MsgpackAdapter<int> pi {};
    pi.do_emit(object_array());

    MsgpackAdapter<int, int> pii {};
    pii.do_emit(object_array());
}

HTML（之前）：

after

HTML（之后）：

$('.appendTo').after('<a id="111" href="javascript:void(0)">');

Answer 3

如果需要文本节点，请使用vanilla JavaScript中的.lastChild属性作为参考。 MDN

var a = document.createElement('a');
a.href = "javascript:void(0)";
td.insertBefore(a, td.lastChild);

这假设td是您在某种程度上选择的<td>元素。

如何使用文本节点插入元素文本之前的元素作为插入<a> element just before it

3 个答案: