Place element in the middle of HTML

Asked

Viewed 154 times

2

Is it possible to place an element in the middle of an html code? Example:

I have the following article that has html:

<article>

  <p>texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>

  <p>texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>

  <h2>Título 1</h2>

  <p>texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>

</article>

Let’s assume that I want to automatically always insert a list with some topics written right after the second paragraph in all articles.

<ul>
  <li>elemento 1</li>
  <li>elemento 2</li>
  <li>elemento 2</li>
</ul>

Someone has an article, a link, or can give me a direction. I believe that with Jquery it is possible. In worpress there are plugins that do this, but it is a project outside of WP.

php html jquery css

  • has nothing to do with css and alignment. For example, insert a list always after the second paragraph, for example.

  • Imagine an article, has the first paragraph, the second, the third. At some point I want to make a call in the middle of the text to another page. This election would be a list, as I put it in the question, and that is right after the second paragraph. I want to do this automatically.

  • 1

    Possible duplicate: Create div among others instead of at the end with Javascript

3 answers

2


If that’s what I understand you can use the method .append jQuery to include a link after the paragraph you indicate with a class name, or ID that is if you prefer or if you have access to HTML.

Or else you can pick up the element using p:nth-child(N°) or p:eq(n°)

With :nth-child is like the content of the CSS, and the first <p> is = 1
With :eq is the JS index and the first <p> is = 0

I recommend you read this documentation to see how the .append may or may not propagate <p> depending on how you select it https://api.jquery.com/eq-selector/#example-1

It would be something like that:

<p>primeiro p</p>
<p>segundo  p</p>
<p>terceiro p</p>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
  $( "p:nth-child(2)" ).append( "<br><a href='#'>link do append nth-child</a>" );
  $( "p:eq(2)" ).append( "<br><a href='#'>link do append eq()</a>" );
</script>

Official documentation of jQuery http://api.jquery.com/append/

  • I wouldn’t, the articles are already written, I can’t one by one insert a class, it’s unfeasible. It would have to be something that goes through the entire text, identifies the second paragraph, or the 3, or the 4, etc... and inserts anything right after. Quick Adsense plugin for example, does this in WP.

  • @Rod I’ve edited with two other ways to select the <p> desired, one with nth-child and another with eq

  • I think that’s it, man, I’m gonna test it here.

  • 1

    Fuck man. Simple and Perfect.

  • @Cool rod that solved

  • just one last thing, before some element caught as in css? for example, before the second H3.

  • @Young Rod to running here that has already given time to leak the company, but in css is the same thing as Nth-Child, if the tag before the second H3 is a span, and that span is the first of the page you would use span:nth-child(1) { seu css } read more here the basics https://www.w3schools.com/cssref/sel_nth-child.asp vc can still pick with other CSS selectors type first-of-type, only-of-type etc, a searched in Google that will help you more than I writing here rss

  • thanks man. thank you very much.

  • taking advantage of his answer, I return here to ask: It is possible to put a block of Adsense, which is a javscript, inside this append, or something similar?

  • @Rod would rather "inject" a script into the page after it loads, but the Adsense one I wouldn’t recommend doing that, because the Google Bot reads the page in the request , I don’t know if he’ll wait for the page to load whole and then scan again to see if any scripts have loaded something else. From a read on this other answer there is with Meta Tag, but with the Adsense Script it would be the same thing I believe https://answall.com/questions/406120/alterar-as-meta-tags-namepload-affectation-in-ranking/406128#406128

  • to almost near a solution. I have changed everything, I am trying to do this with regex and replace on Asp. Just one detail is missing, please, if I can help. How do I regex to get the third occurrence of the same character in a text? example of text: <p>paragraph 1</p><p>paragraph 2</p><p>paragraph 3</p>. I wish I could get the second "</p>", then I’ll replace it with the ad pad.

  • @Rod dear my knowledge of Regex is 0, unfortunately I can’t help you in this... If it is possible to add an ID in that second P, then it is easier for you to use it as a selector... In the last case open a new question, put all your code and explain well that there is always someone to help

  • 1

    Thanks my comrade. I thank you very much. I opened a new question, it must be something simple.

Show 8 more comments

0

It is possible only that you have to name the HTML elements with the tag id, as follows:

var $wrapper = document.querySelector('.wrapper'),
    HTMLTemporario = $wrapper.innerHTML,
    HTMLNovo = 'Teste prepend com innerHTML </br>';
HTMLTemporario = HTMLNovo + HTMLTemporario;
$wrapper.innerHTML = HTMLTemporario;
<div class="wrapper">Conteúdo</div>

  • 1

    I’m trying to understand here. will insert at the beginning right.

  • @Rod Actually the order I set is you, watch this part HTMLTemporario = HTMLNovo + HTMLTemporario;, see that the new comes first !

  • If you want HTML content to come first, you just have to reverse the order HTMLTemporario = HTMLTemporario + HTMLNovo;

0

$(document).ready(function() {
  var contentUl = `<ul>
  <li>elemento 1</li>
  <li>elemento 2</li>
  <li>elemento 2</li>
</ul>`;


  $("body article").each(function(index) {
   if(index > 1){
    $($(this)).append(contentUl);
   }
  });

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <article>
    <p>texto...</p>
    <h2>Título 1</h2>
  </article>
  <article>
    <p>texto2...</p>
    <h2>Título 2</h2>
  </article>
  <article>
    <p>texto3...</p>
    <h2>Título 3</h2>
  </article>
  <article>
    <p>texto4...</p>
    <h2>Título 4</h2>
  </article>
</body>

  • the texts are already ready and are many it is impossible to insert <div class='jsContentTwoP'></div> in all of them.

  • so I thought, if I can go through the text and identify for example the 3 paragraph and insert something after it.

  • I edited the code, If I didn’t get it wrong, you want it?

Browser other questions tagged php html jquery css

You are not signed in. Login or sign up in order to post.