dodawanie całego elementu za pomocą inneeHTML

Question

Witam, Mam problem z dodanie całego elementu HTML za pomocą.innerHTML. 

<template>
    <div class="main">
        <div id="img">
        </div>
        <div class="text">
            <article>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse quod alias ut illo doloremque eum ipsum obcaecati distinctio debitis reiciendis
                quae quia soluta totam doloribus quos nesciunt necessitatibus, consectetur quisquam accusamus ex, dolorum, dicta vel? Nostrum voluptatem totam,
                molestiae rem at ad autem dolor ex aperiam. Amet assumenda eos architecto, dolor placeat deserunt voluptatibus tenetur sint officiis perferendis atque!
                Voluptatem maxime eius eum dolorem dolor exercitationem quis iusto totam! Repudiandae nobis nesciunt sequi iure! Eligendi, eius libero. Ex, repellat sapiente!
            </article>
        </div>
    </div>
</template>

<script scoped>
var img = '<img src="@/assets/p-log.jpg" alt="foto" />';
yaGetBanner();
function yaGetBanner()
{
   var el = document.getElementById("img");
   el.innerHTML="<img src=\"\@/assets/p-log.jpg\"\">";
}
    
</script>

 

Comments

To może jak masz template, to ...

<template>
  <div class="main">
    <div id="img">
      <img src="@/assets/%%img_log_name%%" alt="foto" />
    </div>
    <div class="text">
      <article>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse quod alias ut illo doloremque eum ipsum obcaecati distinctio debitis reiciendis
        quae quia soluta totam doloribus quos nesciunt necessitatibus, consectetur quisquam accusamus ex, dolorum, dicta vel? Nostrum voluptatem totam,
        molestiae rem at ad autem dolor ex aperiam. Amet assumenda eos architecto, dolor placeat deserunt voluptatibus tenetur sint officiis perferendis atque!
        Voluptatem maxime eius eum dolorem dolor exercitationem quis iusto totam! Repudiandae nobis nesciunt sequi iure! Eligendi, eius libero. Ex, repellat sapiente!
      </article>
    </div>
  </div>
</template>

<script scoped>
  yaGetBanner();
  function yaGetBanner()
  {
    var tmpl = document.querySelector("template").innerHTML;
    console.log(tmpl);
    tmpl = tmpl.replace("%%img_log_name%%", "p-log.jpg");
    console.info(tmpl);
  }     
</script>

 

---

Już rozwiązałem, trochę jestem nie cierpliwy.

Chciałem zrobić żeby zdęcie było większe lub mniejsze w zależności od szerokości okna wystarczyło trochę pomyśleć i wymyśleć @media w css. Przepraszam za niedoprecyzowanie tego w pytaniu.

Pozdrawiam

---

BTW,

trochę pomyśleć i wymyśleć @media w css

raczej "odkryłeś istnienie" @media w css-ie.