INSERT HTML-разметка с использованием перед селектором

Question

#twitter-widget-0 li div.header::before{ 
    content: '<div> <img src="images/home/twt-icon.png"> </div>'; 
} 

Я хочу вставить указанный HTML с помощью HTML перед селектором.

Но он показывает разметку как есть.

На самом деле это Twitter Embedded Widget, созданный с помощью https://twitter.com/settings/widgets/new, и я хочу показать это изображение на каждом твите.

Я попробовал это с JQuery, но с JQuery он ничего не добавляет.

$(document).ready(function() { 
     console.log("debug1"); 
     $("#twitter-widget-0 li div.header").prepend('<div class="boxthreelefts-right" style=" text-align: eig;"> <img src="images/home/twt-icon.png"> </div>'); 

}); 

Answer 1

Попробуйте (если код не внутри IFrame):

Я проверил это работает (в странице):

<div id="twitter-widget-0"> 
    <ul> 
     <li> 
      <div class="header"></div> 
     </li> 
     <li> 
      <div class="header"></div> 
     </li> 
     <li> 
      <div class="header"></div> 
     </li> 
    </ul> 
</div> 
<script> 
$(function(){ 
    $('#twitter-widget-0 li div.header').each(function(key,value){ 
      $(this).before('<div class="boxthreelefts-right" style="text-align: eig;"> <img src="images/home/twt-icon.png"> </div>'); 
    }); 
}); 
</script> 

Answer 2

Вы можете сделать это с помощью CSS и JQuery, но, к сожалению, content: не поддерживает HTML

синтаксис содержание, как показано ниже:

content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit; 

как он не поддерживает HTML, вы можете дать ему URL и установить его положение

как этого

content:url('images/home/twt-icon.png'); 

Но я рекомендую использовать JQuery для добавления HTML элементов.