<div id="CollectionALL">
<div id="collection1" class="col">
<img id="Img1" class="imageCS"/>
<H1 id="Title1"></H1>
<p id="Text1"></p>
</div>
<div id="collection2" class="col">
<img id="Img2" class="imageCS"/>
<H1 id="Title2"></H1>
<p id="Text2"></p>
</div>
</div>
大家好，
我剛剛開始使用 javascript，并想檢查我應該如何將影像替換或插入到每個 Img1、Img2 和 Img3 標記中。
我相信一旦我能夠弄清楚影像，標題和文本應該采用相同的方法嗎？
function displayResult()
{
var collect1=document.getElementById("img1").rows[0];
var x=collect1.insertCell(-1);
x.innerHTML="<img src='img/abc.png' alt='collection1'/>";
}
uj5u.com熱心網友回復：
您需要在容器內指定 h1、p、img 的選擇器。然后你可以使用 setAttribute 和 innerHTML 函式來設定內容。
然后你可以包裹在一個回圈中并迭代結果陣列。下面的示例將向您展示它是如何在回圈中作業的。
像那樣
function displayResult()
{
var collect = document.getElementById("collection1");
let img = collect.querySelector('img');
let h1 = collect.querySelector('h1');
let p = collect.querySelector('p');
img.setAttribute('src', "https://via.placeholder.com/100");
h1.innerHTML = "collection1";
p.innerHTML = "some text"
}
displayResult() <div id="CollectionALL">
<div id="collection1" class="col">
<img id="Img1" class="imageCS"/>
<H1 id="Title1"></H1>
<p id="Text1"></p>
</div>
<div id="collection2" class="col">
<img id="Img2" class="imageCS"/>
<H1 id="Title2"></H1>
<p id="Text2"></p>
</div>
</div>uj5u.com熱心網友回復：
我不確定我是否正確理解了您的問題，但如果我理解了，我認為在這里使用 JS 是沒有用的。只需通過 HTML 插入您的 src、標題和文本。
<div id="CollectionALL">
<div id="collection1" class="col">
<img id="Img1" class="imageCS" src="img/abc.png">
<h1 id="Title1">My Title</h1>
<p id="Text1">My Text</p>
</div>
<div id="collection2" class="col">
<img id="Img2" class="imageCS" src="img/abc.png>
<h1 id="Title2">My Title</h1>
<p id="Text2">My Text</p>
</div>
</div>
請注意，“img”不是帶有結束符的標簽，因此以 /> 結束：
<img id="Img2" class="imageCS"/>
不太對。此外，HTML 中的標簽區分大小寫，因此“H1”不是有效標簽，但“h1”是。
uj5u.com熱心網友回復：
var ImgA= document.getElementById("Img1");
Img1.src = "abc.jpg";
var TitleA= document.getElementById("Title1");
TitleA.textContent = "Some Title Header Thing";
var TextA= document.getElementById("Text1");
TextA.textContent = "qwerty some text";
我想我會這樣做。似乎作業
謝謝大家
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/434100.html
標籤：javascript html css