在段落元素內動態生成跨度元素

Question

我正在嘗試添加 HTML 通用控件，將跨度和段落放置在 div 內，然后在占位符內 - 動態地添加。

下面是占位符中 HTML 的樣子：

<div class="card">
    <p class="icon_bar card-img-top"><span class="fa app_icon fa-cogs"></span>My header text goes here.</p>
    <div class="card-body">
        <h5 class="card-title">My H5 Title Text</h5>
    </div>
</div>

我似乎無法顯示 span 元素以及結束段落標記之前的 span 元素之后的文本。 這是我嘗試過的：

//No issues here
System.Web.UI.WebControls.PlaceHolder ph = new System.Web.UI.WebControls.PlaceHolder();
int phaddone = cardID;
ph.ID = "PlaceHolder" + phaddone.ToString();
CardDiv.Controls.Add(ph);

//This seems to work fine too
HtmlGenericControl oustideDiv = new HtmlGenericControl("div");
oustideDiv.ID = "cardDiv" + cardID.ToString();
oustideDiv.Attributes.Add("class", "card");

//Here's the problem
var p1 = new HtmlGenericControl("p");            
p1.Attributes.Add("class", "icon_bar card-img-top");            

var s1 = new HtmlGenericControl("span");
s1.Attributes.Add("class", "fa app_icon fa-cogs");

p1.Controls.Add(s1);
p1.InnerHtml = headerText;
oustideDiv.Controls.Add(p1);

//This works too
HtmlGenericControl bodyDiv = new HtmlGenericControl("div");
bodyDiv.Attributes.Add("class", "card-body");

var h1 = new HtmlGenericControl("h5");
h1.InnerHtml = titleText;
h1.Attributes.Add("class", "card-title");
bodyDiv.Controls.Add(h1);


ph.Controls.Add(oustideDiv);

Answer 1

您需要在覆蓋跨度時更改此代碼

p1.Controls.Add(s1);           //add the span
p1.InnerHtml = headerText;    //but then overwrite the span with 'headerText' !
oustideDiv.Controls.Add(p1);

到

p1.Controls.Add(s1);
p1.InnerHtml = @"<span class=""fa app_icon fa-cogs"" />" + headerText;
oustideDiv.Controls.Add(p1);