在段落元素内动态生成 span 元素

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);

在段落元素内动态生成 span 元素

Dynamically generating span element inside paragraph element

html

c#

htmlgenericcontrol