2

I wanted to add a html div after paragraph on clicking the paragraph, but the after method is not taking the parameter as HTML string, rather it is taking it as normal text.

so on clicking I am getting:

This is a paragraph.
<div>sdfds</div>

rather than:

This is a paragraph.
sdfds

This is the function I am using:

function abc(e) {
    e.target.after("<div>sdfds</div>");
}

I am calling this function by: 

<p onClick=abc(event)>This is a paragraph.</p>
David
  • 208,112
  • 36
  • 198
  • 279
Rishabh Gupta
  • 734
  • 6
  • 10
  • 1
    There seems to be some confusion on the subject. This is not jQuery. – David Mar 08 '17 at 17:32
  • @David it's not called as jquery, but could that be the issue? – freedomn-m Mar 08 '17 at 17:33
  • @freedomn-m: Maybe? There's no evidence that jQuery is being used or even loaded at all in this code. Nothing here is using jQuery. – David Mar 08 '17 at 17:35
  • You may be right. It's sort of implied, but not clearly shown. my bad. – Snowmonkey Mar 08 '17 at 17:36
  • you are not using jquery function correctly, e.target is javascript object convert it to jquery object and call function after, $(e.target).after('
    sdfs
    ');     – subrahmanya bhat Mar 08 '17 at 17:38
  • 1
    I guess it would be helpful if the OP could chime in and specify how/if jQuery is involved at all here. – David Mar 08 '17 at 17:40
  • @subrahmanyabhat: `"there is no function after() in javascript"` - There would appear to be: https://jsfiddle.net/3zocjj7d/ – David Mar 08 '17 at 17:48
  • Sorry,this after just adds textnode, this willnot parse html, try this https://jsfiddle.net/3zocjj7d/1/ – subrahmanya bhat Mar 08 '17 at 17:51
  • @subrahmanyabhat "no `after()` function javascript" - I thought that at first as well, which is why I couldn't understand why the jquery parts were being removed. Looked into it and it's fine, but as you say, adds a textnode. https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/after maybe OP could use `insertAdjacentHTML` https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML – freedomn-m Mar 08 '17 at 21:53

4 Answers4

3

You're kind of mixing vanilla JavaScript with jQuery. Here's how to do it both ways:

JavaScript

function abc(elem) {
  var div = document.createElement("div");
  div.innerHTML = "Text";
  elem.after(div);
}
<p onClick=abc(this)>This is a paragraph.</p>

jQuery

$('p').click(function() {
  $(this).after('<div>Text</div>')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is a paragraph.</p>

Note that WRT the experimental native after() method as the docs for .after() state:

The ChildNode.after() method inserts a set of Node or DOMString objects in the children list of this ChildNode's parent, just after this ChildNode. DOMString objects are inserted as equivalent Text nodes.

j08691
  • 204,283
  • 31
  • 260
  • 272
1

function abc(e) {
  $(e.target).after("<div>Test</div>");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p onClick=abc(event)>This is a paragraph.</p>

Please refer to this answer for the difference between e.target and $(e.target)

Community
  • 1
  • 1
Zoltan Toth
  • 46,981
  • 12
  • 120
  • 134
1

You are confusing a native after function (which I honestly didn't know existed) with jQuery's after method. In your click handler, e.target is a native DOM Node which happens to have an [apparently non-standard] after method. This works differently than jQuery's method. If you wan't jQuery's behavior, you will need to turn your target into a jQuery wrapped element:

$(e.target).after('<div>...</div>');

https://jsfiddle.net/6n3gn57j/

Ryan Wheale
  • 26,022
  • 8
  • 76
  • 96
0

If you want to uase javascript use innerHTML in youcase.

<p onClick=abc(event)>This is a paragraph.</p>
<script>
function abc(e) {
    e.target.innerHTML+=("<div>sdfds</div>");
}
</script>

https://jsfiddle.net/3zocjj7d/1/

subrahmanya bhat
  • 588
  • 3
  • 11