How can I insert custom html code inside a div dynamically?

I have a class that generates some html code for me, namely the output_tooltip method:

class Tooltips_Handler {

private $tooltip;

public function __construct( Tooltip_Base $tooltip ) {
$this->tooltip = $tooltip;
add_action(‘wp_head’, array($this, ‘output_tooltip’));
}

public function output_tooltip() {
echo $this->tooltip->get_html();
}
}

This works for inserting the html inside the header. But I will need this to insert HTML into different sections (a section is a container div in which I insert the code, either targeted by an id # or class .) throughout my theme and there aren’t hooks for everything.

So I’m looking to create an array that would allow me to define a spot-to-insert and what-to-insert, like this:

$tooltips = [
‘#instagram_widget’ => new Tooltips_Handler [..]->output_tooltip(),
‘.featured-section-audio-post’ => new Tooltips_Handler [..]->output_tooltip()
];

foreach( $tooltips as $the_location => $the_html ) {
insert_into_section($the_location, $the_html);
}

This will loop through the array, generate my HTML and then insert it.

Unfortunately, I can’t find a proper way to do this except loading all of the HTML and inserting it via JS, which feels clunky.

Read more here:: How can I insert custom html code inside a div dynamically?

Leave a Reply

Your email address will not be published. Required fields are marked *