1

Tengo el siguiente div -> <div class="detail-write"> donde se muestra todo el detalla del articulo, pero los anuncios automáticos no se están vinculando entre los textos, pesé a tenerlos configurados y, mantener suficiente información:

<div class="detail-write">
  <p>Lorem ipsum dolor sit amet, cu augue omnes fuisset his. Eam in causae aliquando honestatis, has prompta argumentum sadipscing at. In nam vidisse erroribus torquatos, his ut doctus interpretaris, labitur dolores nominati ius id. Pri ea facer conclusionemque, duo in simul vivendum.</p>
  <p>Lorem ipsum dolor sit amet, cu augue omnes fuisset his. Eam in causae aliquando honestatis, has prompta argumentum sadipscing at. In nam vidisse erroribus torquatos, his ut doctus interpretaris, labitur dolores nominati ius id. Pri ea facer conclusionemque, duo in simul vivendum.</p>

  <!--Aquí incrustar contenedor -->

  <p>Lorem ipsum dolor sit amet, cu augue omnes fuisset his. Eam in causae aliquando honestatis, has prompta argumentum sadipscing at. In nam vidisse erroribus torquatos, his ut doctus interpretaris, labitur dolores nominati ius id. Pri ea facer conclusionemque, duo in simul vivendum.</p>
  <p>Lorem ipsum dolor sit amet, cu augue omnes fuisset his. Eam in causae aliquando honestatis, has prompta argumentum sadipscing at. In nam vidisse erroribus torquatos, his ut doctus interpretaris, labitur dolores nominati ius id. Pri ea facer conclusionemque, duo in simul vivendum.</p>
</div>

La información, el texto del articulo son traídos desde una consulta a la base de datos.

Cómo puede incrustar este contenedor con todo lo que en ello incluya, con jQuery/javascript o de un archivo php, en el segundo o tercer párrafo <p>:

<div class="ads-google">
   <!-- codigo del bloque de anuncio -->
</di>

Dentro del contenedor <div class="detail-write"></div>

2 respuestas 2

2

Puedes utilizar un iframe, con este incrustas una pagina completa con todos sus características dentro del elemento especificado.

Ejemplo:

<div class="detail-write">
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <iframe id="inlineFrameExample"
        title="Inline Frame Example"
        width="300"
        height="200"
        src="https://url_pagina.html">
    </iframe>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
</div>

Utilizando ajax:

<div class="detail-write">
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p id="resultado">
    </p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
</div>
<script>
    $( document ).ready(function() {
      $.ajax({
            url: "getInfo.php", 
            success: function(result){
                $("#resultado").html(result);
            }
      }); 
    });
</script>

en tu archivo getInfo.php

<?php
$respuesta="";
//aquí tus operaciones para obtener datos de tu base y formar tu contenido html
// $respuesta="<p>informacion</p>";
echo $respueta;
?>
5
  • 1
    Lo probé amigo pero ese anuncio se va mostrar igual como los que genera automáticamente en la parte superior e inferior quedando nulo la larga lectura, una manera de hacer mostrar ese contenedor después del segundo o tercer párrafo <p>
    – Mary
    el 5 feb. 2020 a las 18:36
  • habrá que adecuarlo a tus requerimiento ya que solo se agrego como ejemplo el 5 feb. 2020 a las 18:41
  • Realmente es fácil agregarlo de esa forma cuando sabes que puedes manipular la información o editar código html, pero los artículos son traídos de la base de datos, para hacerlo de esa forma tendría que editar los datos registrados.
    – Mary
    el 5 feb. 2020 a las 18:44
  • si lo que requieres es obtener información de tu Back e insertarlo dentro de cierto elemento puedes hacer petición ajax. el 5 feb. 2020 a las 19:08
  • +1 por el tiempo dedicado amigo, pero realmente fue más sencillo con la última respuesta, gracias :)
    – Mary
    el 5 feb. 2020 a las 20:34
1

Si lo único que se desea lograr es poder mover una información o contener especifico es tan simple como insertar o mover dicho contenido a otro contenedor utilizando jQuery

	$(function(){
  		$('#source').insertAfter($('#destination>p').eq(3));
	});
#source {
  color: white;
  background: green;
  padding: 4px 8px;
}

#destination {
  color: white;
  background: red;
  padding: 4px 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="source">
  <p>Source</p>
</div>

<div id="destination">
  <p>Destination</p>
  <p>Destination</p>
  <p>Destination</p>
  <p>Destination</p>
  <p>Destination</p>
  <p>Destination</p>
  <p>Destination</p>
  <p>Destination</p>
  <p>Destination</p>
  <p>Destination</p>
  <p>Destination</p>
  <p>Destination</p>
  <p>Destination</p>
  <p>Destination</p>
  <p>Destination</p>
</div>

Ahora cambiando los valores en .eq(3)) puedes ir jugando, manipulando donde ubicar la información en el tercer p o el cuarto y, así sucesivamente.

Puedes observar otra alternativas pero en lo especifico es tal como lo he publicado.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.